Почему addEventListener работает только для одного элемента?

Question

[Keterone]

В Цикле for, addEventListener применяеться только к последнему элементу, в чём может быть проблема?

GtS = selector => document.querySelector(selector)
let array = [...]
let render = () => { // render table func
    for (let i = 0; i < array.length; i++) {
        let a = array[i].info
        GtS('table').innerHTML += `<element class ="delete${i+1}">${a}</element>`

        GtS(`.delete${i+1}`).addEventListener('click', ()=>{deleteUser()})
    }
}

Answer 1

[Rsa97]

GtS('table').innerHTML += ...Здесь вы полностью переписываете содержимое элемента, соответственно заменяются все дочерние элементы, а к новым элементам никаких привязок нет.

Comments

[Keterone]

как я переписываю полностью, если там стоит +=, то есть я добавляю новый элемент. Или я что то не понимаю, только учусь)

[Rsa97]

Keterone,
GtS('table').innerHTML += ...
эквивалентно

GtS('table').innerHTML = GtS('table').innerHTML + ...

[Keterone]

Rsa97, А что мне тогда сделать, чтобы вышло правильно?

[Rsa97]

Keterone, Использовать всплытие событий. Один раз в начале назначаете обработчик на родительский элемент и в него будут попадать все всплывающие события из дочерних элементов. И формировать строку до того, как записывать её в DOM.

GtS('table').addEventListener('click', deleteUser);
...
let str = '';
for (let i = 0; i < array.length; i++) {
  let a = array[i].info
  str += `<element class ="delete">${a}</element>`
}
GtS('table').innerHTML += str;
...
function deleteUser(e) {
  if (!e.target.classList.contains('delete')) {
    return;
  }
  ...
}

[Keterone]

Rsa97, А я просто сделал новый цикл, в котором уже добавляет eventListener. Или ваш варинт лучше?

[Rsa97]

Keterone, Вариант со всплытием позволяет добавлять элементы в любой момент не привязывая каждый раз обработчик.