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

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

您是否知道原因以及如何解决此问题

文本
文本
文本
文本

var allItems=Array.from（document.querySelectorAll（'.testitem'）；
allItems.forEach（功能（项目）{
item.addEventListener（'单击'，函数（））{
console.log（“开始！”）；
});
});
var template=“新建按钮”；
//document.querySelector（'.container'）.innerHTML+=模板；

重写将新按钮添加到此按钮的代码：

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

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

---

最有可能发生的情况是，当您在容器的内部html上使用

+=

时，它会完全重新创建子内容。因此，创建了一组全新的按钮，导致以前的事件处理程序不再工作。

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

---

解决方案很简单，首先创建项，然后向其中添加侦听器。也就是说，移动

var模板

和

document.querySelector（'.container'）.innerHTML+=template到代码的最顶端
感谢您的解释，但重点是在添加事件后添加此元素（甚至更多）。我相信在javascript中无法做到这一点，您必须先添加项，然后再向其添加侦听器。您的代码逐行执行。当然，如果你想要的话，你可以延迟函数。我想澄清一下，在定义监听函数之后添加项的意义是什么？我需要根据用户需求添加多个元素。因此，页面上的按钮是“添加下一个元素”，单击该按钮后，将使用类
添加新元素。测试项
将添加到
。容器
。如果是这种情况，则可以在单击按钮后添加功能。您对“添加下一个元素”单击的回调将生成模板，并为其分配侦听器
addelement.addEventListener（'click'，function（）{//此处制作模板，//此处附加所有模板所需的功能}）