如何将事件侦听器添加到动态创建的HTML集合中

Question

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

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>

Answer 1

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

工作示例：(我在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);

<div id="wrapper"></div>