javascript - Dom 使用 JavaScript 遍历 Dom 但事件未命中 Html 元素

Question

我想将删除功能添加到由 Javascript 动态创建的 Li 元素上的按钮，但我似乎无法让事件监听器点击目标按钮。

我试着通过做立即添加它

    var trashButton = document.getElementsByClassName("deleteListItemButton");
    trashButton.addEventListener('click',removeLiItem);

但是我得到了一个未处理的异常错误

var idForLiElement =1;

document.getElementById("addTaskId").addEventListener('click', function(){

var valueFromTextBox = document.getElementById("textBoxId").value; 

if(valueFromTextBox) addItemToDo(valueFromTextBox);
});

function addItemToDo(valueFromTextBox){

var unorderedList = document.getElementById("toDoId")

var listElement =  document.createElement("li");
listElement.className ="listItem";
listElement.innerHTML = valueFromTextBox;
listElement.id =Number(idForLiElement);
idForLiElement ++;

//puts the newest list element before the last element
unorderedList.insertBefore(listElement, unorderedList.childNodes[0]);

//creates the  div that will contain both buttons in each list element
var buttonsContainer =  document.createElement("div");
buttonsContainer.className ="listItemButtonContainer";

//creates the delete button and assigns it a class name
var deleteButton =  document.createElement("Button")
deleteButton.className ="deleteListItemButton";

//creates the complete button and assigns it a class name
var completeButton =  document.createElement("Button")
completeButton.className ="completeListItemButton";

//creates the delete image tag and assigns it a class name
var trashImageTag =  document.createElement("i")
trashImageTag.className = "fa fa-trash fa-2x";

//creates the check mark button and assigns it a class name
var checkMarkImageTag =  document.createElement("i")
checkMarkImageTag.className= "fa fa-check fa-2x";

//appends delete image tag to delete button
deleteButton.appendChild(trashImageTag);

//appends check mark image tag to complete button
completeButton.appendChild(checkMarkImageTag);

//appends delete button to button container
buttonsContainer.appendChild(deleteButton);

//appends complete button to button container
buttonsContainer.appendChild(completeButton)

//appends button container to list element
listElement.appendChild(buttonsContainer);
};

var trashButton = document.getElementsByClassName("deleteListItemButton");

for (i = 0; i < trashButton.length; i++) {
trashButton[i].addEventListener('click',removeLiItem)
};

function removeLiItem(e){
console.log(this)
};

我只想让事件监听器点击 console.log，这样我就知道按钮正在工作

Answer 1

将事件附加到您刚刚创建的元素

deleteButton.addEventListener('click', function() { console.log('hit!') })