添加新 HTML 项后丢失事件触发

Question

在容器中添加新元素后事件触发丢失。示例代码如下。取消注释最后 Javascript 行

后事件丢失

您知道原因以及如何解决这个问题吗？

<div class="container">
  <button class="test-item">text</button>
  <button class="test-item">text</button>
  <button class="test-item">text</button>
  <button class="test-item">text</button>
</div>

var allItems = Array.from(document.querySelectorAll('.test-item'));

allItems.forEach(function(item){
   item.addEventListener('click', function(){
   console.log("Go!");
   });
});

var template = "<button class='test-item'>New button</button>";

//document.querySelector('.container').innerHTML += template;

Answer 1

重写添加新按钮的代码：

var template = document.createElement("button");
template.className = "test-item";
template.innerHTML = "New Button";

document.querySelector('.container').appendChild(template);

最有可能发生的情况是，当您在容器的内部 html 上使用 += 时，它会完全重新创建子内容。因此创建了一组完整的新按钮，导致任何以前的事件处理程序不再工作。

Answer 2

您刚刚失去了听众的踪迹。首先，您定义 var allItems，其中 return 您是一个数组，然后为该数组上的每个项目添加一个侦听器。但是随后您在代码的最后一行添加了更多项目，这意味着现在您拥有一组完全不同的数组。所以 none 你的听众会工作。

解决方法很简单，先制作item，再添加监听器。意思是，将 var template 和 document.querySelector('.container').innerHTML += template; 移到代码的最顶部

添加新 HTML 项后丢失事件触发

Losing an event triggering after adding new HTML item

javascript

events

innerhtml

addeventlistener

dom-events