Не срабатывает EventListener присвоенный через цикл

Question

Низки поклон тому кто поможет. Проблема заключается в следующем: получаю через template макет HTML элемента li, затем добавляю его на страницу. В нём содержится кнопка с id="add". После добавления всех li в список ul я получаю в NodeList все button посредством document.querySelectorAll('button#add'). После этого прогоняю полученный массив через цикл forEach присваивая addEventListener. Listener, в свою очередь, на отрез не реагирует. Сам цикл работает(проверял посредством вывода строки в консоль). При этом в EventListeners присвоенный listener на button отображается. При клике никакой реакции


      let templeate = document.getElementById("item").content;
      const readyItem = templeate.cloneNode(true);
      meals.appendChild(readyItem);
      const addersItem = document.querySelectorAll("button#add");

  addersItem.forEach(item => {
    item.addEventListener("click", () => {
      console.log('done');
    });
  })

Answer 1

const addersItem = document.querySelectorAll("button#add");
addersItem.forEach(item => {
  item.addEventListener("click", (e) => {
    console.log('done', e.target.outerHTML);
  });
});

<button id="add0">Button 0</button>
<button id="add">Button 1</button>
<button id="add">Button 2</button>
<button id="add">Button 3</button>
<button id="add4">Button 4</button>

Возможно, Вы [пере]создаете элементы после цикла назначения обработчиков события.

БЛОГ НА HUSL

Не срабатывает EventListener присвоенный через цикл

Ответы (1 шт):