JS EventListener нажмите исчезающие

Question

Я создал простой fidlle

var cnt = 1; 
function add() { 
    var root = document.getElementById('root')  
    root.innerHTML += '<br /><a id= "a_' +cnt + '" href="#">click</a>' 
    var a = document.getElementById("a_"+cnt) 
    a.addEventListener('click', function(event) { 
     alert('click:a_'+cnt) 
    }) 
    cnt++ 
} 

При нажатии кнопки Add нажата один раз добавляется новая ссылка, и после нажатия на эту ссылку предупреждение появляется.

Когда добавляется больше ссылок с помощью кнопки Добавить, работает только последняя ссылка (другие не имеют прослушивателя событий щелчка в соответствии с инструментами devel).

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

Answer 1

Поскольку вы повторно вставляете якорные метки в html. Вопрос аналогичен Appending HTML string to the DOM.

Вы можете использовать

root.insertAdjacentHTML('beforeend', '<br /><a id= "a_' +cnt + '" href="#">click</a>'); 

вместо

root.innerHTML += '<br /><a id= "a_' +cnt + '" href="#">click</a>' 

Работа скрипку https://jsfiddle.net/0nm4uLvd/

Просто, чтобы улучшить ответ, вот еще одна ссылка, почему слушатели событий удаляются, когда дом элемент удаляется = >If a DOM Element is removed, are its listeners also removed from memory? спасибо этим парням :)

Answer 2

Вы изменяете внутреннийHTML вашего корневого элемента. Это приведет к тому, что полный «корень» будет уничтожен при воссоздании, поэтому будет работать только новое событие.

См. Manipulating innerHTML removes the event handler of a child element?.

Answer 3

Проверьте в консоли свою переменную cnt. Вы не отправляли весь контекст, в котором вызывается функция добавить, но у меня есть сильное предположение, что это переменный остается всегда 1.

и точка с запятой после НКТА ++

Answer 4

Вы можете установить класс в Ссылки: class = "some-class". Затем вы можете использовать jquery для прослушивания события click для элементов этого класса.

$(document).on('click', '.some-class', function(event) { 
    alert('click:'+$(this).attr('id')); 
}); 

Runnable пример https://jsfiddle.net/2d99hq1h/1/