添加新元素后事件侦听器不起作用

Question

基本上，我有一个文本框，我可以在其中写一些文本，单击 "Add Post"，一个新的 post 将添加到其他 post 的列表中（类似于推特）。每个 post 都有一个 'delete' 按钮。

现在，当我在每个 post 上单击删除时，我有一个 console.log 只是说 "TEST"。它工作正常。但是，在我添加一个 post 之后，这意味着一个新元素已经被添加到前面，事件侦听器停止工作，即使对于现有的 'delete' 按钮（不仅仅是新添加的按钮）也是如此。

这就是我为删除编写事件侦听器的方式。

for(var i = 0; i < deleteDOM.length; i++) {
   deleteDOM[i].addEventListener("click", deleteEntryCont);
}

...其中 deleteEntryCont 只是控制台暂时记录 "TEST" 的函数。

deleteDOM 是 document.getElementsByClassName("delete") 的变量，只是一个节点列表。

这是添加新 'post' 的部分：

entryList.forEach(function(entry) {

        var entryItemDOM = document.createElement("li");
        var entryTextDOM = document.createElement("p");
        var metaWrapperDOM = document.createElement("div");
        var timeStampDOM = document.createElement("span");
        var deleteDOM = document.createElement("span");

        // Create entry wrapper & class names
        entryItemDOM.className = "entry";
        entryItemDOM.className += ` ${entry.mood}-entry`;
        entryItemDOM.id = entry.id;

        // Insert entry at the top of the stack
        domEl.entriesDOM.insertBefore(entryItemDOM, domEl.entriesDOM.firstChild);

        entryItemDOM.appendChild(entryTextDOM);
        entryTextDOM.innerHTML = entry.text;

        entryItemDOM.appendChild(metaWrapperDOM);
        metaWrapperDOM.className = "overflow-hidden";

        metaWrapperDOM.appendChild(timeStampDOM);
        timeStampDOM.className = "timestamp";
        timeStampDOM.innerHTML = entry.timeStamp;

        metaWrapperDOM.appendChild(deleteDOM);
        deleteDOM.className = "delete";
        deleteDOM.innerHTML = "Delete";


      });

其中 entryList 是上述代码在 HTML 中呈现的对象数组。

可能是什么问题？

Answer 1

如评论中所述，您仅在加载页面时添加事件侦听器，这意味着它仅添加到当时可见的 posts。您需要为您创建的每个新 post 分别添加侦听器：

metaWrapperDOM.appendChild(deleteDOM);
deleteDOM.className = "delete";
deleteDOM.innerHTML = "Delete";
deleteDOM.addEventListener('click', deleteEntryCont);

添加新元素后事件侦听器不起作用

Event listener doesn't work after adding a new element

javascript

event-handling

event-listener

event-binding