如何将事件侦听器添加到动态创建的 HTMLcollection？答案

【问题标题】：How do I add an event listener to a dynamically created HTMLcollection?如何将事件侦听器添加到动态创建的 HTMLcollection？
【发布时间】：2021-09-06 04:07:54
【问题描述】：

我正在创建一个小型库应用程序，并尝试添加删除条目功能。我正在寻找添加按钮的实际功能，但我不知道如何将事件监听器添加到每个实例。当我单击图像时，它什么也不做。

JAVASCRIPT

//dynamic creation of trash button
let deleteEntry = document.createElement("td")
const deleteBtn = document.createElement("input");
const deleteImg = document.createAttribute("type");

deleteImg.value = "image";
deleteBtn.className = "deletebtn"
deleteBtn.src = "red_trash_can.png";
deleteEntry.append(deleteBtn);
deleteBtn.setAttributeNode(deleteImg)
    
//
const trashBtn = Array.from(document.getElementsByClassName("deletebtn"));
    
trashBtn.forEach(button => {
    button.addEventListener('click',e => {
        console.log(e)
    })
})

HTML

<td>
   <input class="deletebtn" src="red_trash_can.png" type="image">
</td>

【问题讨论】：

我认为这是“getElementsByClassName”的问题。请改用“querySelectorAll”。
@Irfanwani 当我使用“querySelectorAll”时它仍然给我一个空数组
这是因为 document.getElementsByClassName("deletebtn") 或 querySelectorAll 在加载 DOM 时只被调用一次。它不绑定动态添加的元素。我对 VanillaJS 有同样的问题，但如果你使用 jQuery，你可以很容易地做到$(document).on('click', '.deletebtn', () => {...})

标签： javascript html dynamic

【解决方案1】：

您可以在添加之前将事件侦听器直接添加到deleteBtn。并且type 也可以像使用className 或src 一样直接添加。

工作示例：（我在 console.log() 中使用了一个虚拟图像和一个简单的字符串，因为事件花费了很长时间）

//dynamic creation of trash button
const deleteEntry = document.createElement("td")
const deleteBtn = document.createElement("input");

deleteBtn.type = "image";
deleteBtn.className = "deletebtn"
deleteBtn.src = "https://picsum.photos/200";
deleteBtn.addEventListener('click', () => {
    console.log("You clicked the image!")
});

deleteEntry.append(deleteBtn);
document.querySelector("#wrapper").append(deleteEntry);

&lt;div id="wrapper"&gt;&lt;/div&gt;

【讨论】：