为什么这个addEventListener对我创建的li元素不起作用？

Question

I try to implement an aotocomplete input. I want when user clicked new added li element, the input value will be the value of the li element. However, this addEventListener seems not work in this function. May I know why? I think every new li element did create before I add event listener to them.

function displayMatches(matchesArr) {
  var newLi;
  for (let j of matchesArr) {
    newLi = document.createElement('li');
    newLi.innerHTML = `<li id="${j.replace(/\s/g,'')}">${j}</li>`;
    autoResults.innerHTML += newLi.innerHTML;
    document.getElementById(j.replace(/\s/g, '')).addEventListener("click",
      function(e) {
        alert("Hello World!");
      })
  }
}

If I use NewLi it also doesn't work.

newLi.addEventListener("click", 
    function(e) {
        alert("Hello World!");
    })

Answer 1

The li that you're adding to the DOM is not the same one as newLi . You're creating a brand new element when you assign to .innerHTML . You're also destroying and recreating all the old elements in autoResults . When you assign to .innerHTML it parses the HTML text from scratch, creating all new elements; any properties that were set on the old elements, such as event listeners, are lost.

Instead of assigning to .innerHTML , append the element itself.

 function displayMatches(matchesArr) { var newLi; for (let j of matchesArr) { newLi = document.createElement('li'); newLi.id = j.replace(/\\s/g, ''); newLi.innerHTML = j; newLi.addEventListener("click", function(e) { alert("Hello World!"); }); autoResults.appendChild(newLi); } }