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，它返回一个数组，然后为该数组上的每个项目添加一个侦听器。但是，然后在代码的最后一行中添加更多项，这意味着现在您有了一组完全不同的数组。因此，您的听众都无法使用。

解决方案很简单，首先创建项目，然后向其添加侦听器。意思是，将var template和document.querySelector('.container').innerHTML += template;移到代码的顶部

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

2 个答案: