Я создал простую 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).
Почему работает только последняя ссылка и как заставить все ссылки работать?
3 ответа
Вы модифицируете innerHTML своего корневого элемента. Это приведет к уничтожению полного «корня» и его повторному созданию, поэтому будет работать только новое событие.
См. Манипулирование innerHTML удаляет обработчик событий дочернего элемента?.
Проверьте в консоли вашу переменную cnt. Вы не опубликовали весь контекст, где вызывается функция add, но у меня есть сильное предположение, что эта переменная всегда остается 1.
И напишите точку с запятой после вашего cnt ++
Вы можете установить класс для ваших ссылок: class = "some-class". Затем вы можете использовать jquery для прослушивания события click для элементов этого класса.
$(document).on('click', '.some-class', function(event) {
alert('click:'+$(this).attr('id'));
});
Пример выполнения https://jsfiddle.net/2d99hq1h/1/
Похожие вопросы
Связанные вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.