Question

我尝试实现aotocomplete输入。我想当用户单击新添加的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);
  }
}

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

1 个答案: