Потеря события запуска после добавления нового элемента HTML - PullRequest
Новая
       68

Потеря события запуска после добавления нового элемента HTML

0 голосов
/ 10 октября 2018

Запуск события теряется после добавления нового элемента в контейнер.Пример кода ниже.Событие пропадает после раскомментирования последней строки JavaScript

Знаете ли вы причину и как решить эту проблему? 

<div class="container">
  <button class="test-item">text</button>
  <button class="test-item">text</button>
  <button class="test-item">text</button>
  <button class="test-item">text</button>
</div>

var allItems = Array.from(document.querySelectorAll('.test-item'));

allItems.forEach(function(item){
   item.addEventListener('click', function(){
   console.log("Go!");
   });
});

var template = "<button class='test-item'>New button</button>";

//document.querySelector('.container').innerHTML += template;

Ответы [ 2 ]

0 голосов
/ 10 октября 2018

Вы только что потеряли трек своего слушателя.Сначала вы определяете var allItems, который возвращает вам массив, затем для каждого элемента в этом массиве вы добавляете слушателя.Но затем вы добавляете больше элементов в последнюю строку вашего кода, это означает, что теперь у вас есть совершенно другой набор массивов.Так что ни один из ваших слушателей не будет работать.

Решение простое, сначала создайте элемент, а затем добавьте к нему слушателя.То есть, переместите ваши var template и document.querySelector('.container').innerHTML += template; в самый верх вашего кода

0 голосов
/ 10 октября 2018

Перепишите код, который добавляет новую кнопку к этому: 

var template = document.createElement("button");
template.className = "test-item";
template.innerHTML = "New Button";

document.querySelector('.container').appendChild(template);

Скорее всего, когда вы используете += во внутреннем html контейнера, он полностью воссоздает дочерний контент.Таким образом, создается новый набор кнопок, в результате чего все предыдущие обработчики событий перестают работать.

...