为什么这个 addEventListener 不适用于我创建的 li 元素？

Question

我尝试实现自动完成输入。我希望当用户单击新添加的 li 元素时，输入值将是 li 元素的值。但是，这个 addEventListener 似乎在这个函数中不起作用。我可以知道为什么吗？我认为每个新的 li 元素在我向它们添加事件侦听器之前都会创建。

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!");
      })
  }
}

如果我使用 NewLi，它也不起作用。

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

Answer 1

您添加到 DOM 的 li 与 newLi 不同。当您分配给.innerHTML 时，您正在创建一个全新的元素。您还破坏并重新创建了autoResults 中的所有旧元素。当您分配给 .innerHTML 时，它会从头开始解析 HTML 文本，创建所有新元素；在旧元素上设置的任何属性（例如事件侦听器）都将丢失。

不是分配给.innerHTML，而是附加元素本身。

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);
  }
}