How can I attach an event listener to an element that has itself been inserted with Javascript? (without jQuery)

Question

Where I insert some new content (among other things):

var addedaccessories = false;

//open recommended accessories
selectPlan.addEventListener('change', function() {
  accessories.classList.add('accessories--open');

  instrumentformbtn.classList.add('instrument-form__btn--enabled');
  price.innerHTML = `
<div class="priceinfo__top"><span class="price__largetext">Your plan:</span> ${selectPlan.value} per month for 36 months</div>
<div class="priceinfo__btm">First installment of ${selectPlan.value} payable on checkout</div>
`;
  price.style.paddingTop = 0;
  price.style.paddingBottom = 0;

  if (addedaccessories == false) {
    accessories.innerHTML += `<div>
   <div class="checkbox_container"> <input value="0.27" id="stand" type="checkbox"><label for="stand">Opus LMS02 lightweight folding music stand supplied with carrying bag in black</label>
    <legend>£0.27p for 60 months</legend></div>
    <br>
       <input value="0.99" id="shoulderrest" type="checkbox"><label for="shoulderrest">Kun violin shoulder rest 4/4</label>
    <legend>£0.99p for 60 months</legend>
    </div>`;
    addedaccessories = true;
  }

  selectplanmessage.style.display = 'none';
});

Where I want to add my event listener. I need to be able to get the value out of the inputs.

accessories.addEventListener('click', function(e) {
  if (e.target.tagName == 'LABEL') {
    console.log('worked');
  }
});

Possible duplicate of http://stackoverflow.com/questions/34896106/attach-event-to-dynamic-elements-in-javascript — san A, Mar 17 '17 at 12:33

radiovisual · Accepted Answer · 2017-03-17T13:11:20.480

2

After you have injected content into the DOM, you can query for it, attach events, grab values, etc, just like you would any other DOM element.

Consider the following code:

var accessories = document.querySelector('.accessories');
var addedaccessories = false;


if (addedaccessories === false) {
  // inject content into the DOM
  accessories.innerHTML += '<input value="0.27" id="stand" type="checkbox"><label for="stand">Stand</label><br/><input value="0.28" id="mic" type="checkbox"><label for="mic">Mic</label>';
}

accessories.addEventListener('click', function(e) {
  if (e.target.tagName === 'LABEL') {
    // now that content has been injected, you can query 
    // for it like you normally would
    var inputs = document.querySelectorAll('.accessories input[type=checkbox]');

    // now grab the value out of the injected elements
    inputs.forEach(function(input) {
      console.log(input.value);
    });
  }
});

Which has the following output to the console:

0.27
0.28

You can find a JSFiddle demo here.

edited Mar 17 '17 at 13:11

answered Mar 17 '17 at 13:02

radiovisual

6,298
1
26
41

Thanks! I am still having a bit of trouble adding them all up. `var accessoryTotal = 0; accessories.addEventListener('click', function(e) { if (e.target.type == 'checkbox') { var inputs = document.querySelectorAll('.accessories input[type=checkbox]'); for (let i = 0; i < inputs.length; i++) { if (inputs[i].checked) { accessoryTotal += parseInt(inputs[i].value, 10); } } } });` – Ollie_W Mar 17 '17 at 15:53
@Ollie_W I have another fiddle to show how you can add the totals: https://jsfiddle.net/xman3bc1/ – radiovisual Mar 17 '17 at 16:00
Thanks for the fiddle. It seems to have some problems. In your fiddle I have to click the input and then click it again before it registers the right value. It also calculates the combined value straight away rather than determining the total based on whether only one or both of the inputs are checked. I'm finding this a really hard problem to solve. – Ollie_W Mar 17 '17 at 17:10
@Ollie_W, make a fiddle that shows exactly what you are trying to do, as well as your expected output in the comments. I am only showing examples of how to loop through values and such, so my solutions aren't specific enough to help you solve your specific problem. – radiovisual Mar 17 '17 at 18:37
@Ollie_W, did you figure out your problem? If you make a detailed JSFiddle with your expectations and current implementation, I can help you out. – radiovisual Mar 18 '17 at 12:55

How can I attach an event listener to an element that has itself been inserted with Javascript? (without jQuery)

1 Answers1