JS eventListener click исчезает

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++
}

При нажатии кнопки «Добавить» после добавления новой ссылки и после нажатия на эту ссылку появляется предупреждение.

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

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

javascript

4

Joe 8 Дек 2016 в 16:15

Answer 1

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

См. Манипулирование innerHTML удаляет обработчик событий дочернего элемента?.

2

Community 23 Май 2017 в 12:01

Answer 2

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

И напишите точку с запятой после вашего cnt ++

1

dbmongo 8 Дек 2016 в 13:27

Answer 3

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

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

Пример выполнения https://jsfiddle.net/2d99hq1h/1/

1

Denis Bors 8 Дек 2016 в 13:32

JS eventListener click исчезает

3 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

javascript