1

I am adding some elements dynamically to a page when making this chrome extension. It is a list added like this

 var result = document.createElement("UL");
 var checkoutArea = document.getElementById("shipping");
 result.setAttribute("id", "resList");
 if (document.getElementById("resList") === null) {
   checkoutArea.appendChild(result);
 }

I am also adding <'li'> child to it later. But when I am trying to add onclick function to each item, it does not work. I checked when I click on the item dynamically generated, and it seems that those items are not clicked, as this gives wrong results:

document.addEventListener('click', function(e) {
  e = e || window.event;
  var target = e.target || e.srcElement,
  text = target.textContent || text.innerText;
  console.log(text);
}, false);

a screenshot of the DOM of dynamically generated list

Also when I 'inspect' on that 'home' item, chrome is giving me that highlighted element, which is the 'save & continue' button besides. I am thinking there's an overlap, so how should add any 'onclick' function to those items?? Great thanks in advance.

Travis J
  • 81,153
  • 41
  • 202
  • 273
CHHU
  • 61
  • 1
  • 1
    You're not adding multiple elements with the same ID are you? Also, you can attach the onclick event handler to the elements themselves, rather than the document.. – enhzflep Apr 06 '18 at 01:19
  • post the whole code so we can see – Abr001am Apr 06 '18 at 01:23
  • If you're using a loop to generate the `
  • `s then it's most like this [**famous problem**](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example).
    • – ibrahim mahrir Apr 06 '18 at 01:24
  • Okay.. it turns out that the components are overlapping with others. Thank u all for helping anyway – CHHU Apr 11 '18 at 00:36