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!') })

Answer 2

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

这些元素是动态创建的，因此在创建元素时，已经执行了添加事件侦听器的for循环。

这就是event propogation的作用。让父元素（ul）监听事件的点击，而不是让每个孩子来承担责任。这样，添加多少个子元素都无所谓，妈妈（父元素）将始终在监听点击。

您可以执行以下操作：

// on your ul element
const itemList = document.querySelector(".item-list");

// listen for click on here
itemList.addEventListener('click', removeLiItem);

// you can access the actual element through the event's `target`
function removeLiItem (event) {
  if (event.target.classList.contains('deleteListItemButton') {
    // remove element
  }
}

Dom使用JavaScript遍历Dom，但事件未达到HTML元素

2 个答案: