Dom Обход Dom с помощью JavaScript, но событие не затрагивает элемент HTML - PullRequest
Новая
       6

Dom Обход Dom с помощью JavaScript, но событие не затрагивает элемент HTML

0 голосов
/ 29 января 2019

Я хочу добавить функцию удаления для кнопки в элементе Li, который динамически создается Javascript, но я не могу заставить получателя событий нажать целевую кнопку.

Я пыталсядобавив его сразу, выполнив 

    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, чтобы я знал, что кнопка работает

Ответы [ 2 ]

0 голосов
/ 29 января 2019

Я хочу добавить функцию удаления к кнопке на элементе Li, который динамически создается с помощью javascript, но я не могу заставить слушателя события нажать целевую кнопку.

Элементы создаются динамически, поэтому к моменту создания элементов цикл for, в который вы добавляете прослушиватели событий, уже выполнен.

Вот что такое распространение события за.Пусть родительский элемент (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
  }
}
0 голосов
/ 29 января 2019

Присоединить событие к элементу, который вы только что создали 

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