addEventListener, за которым следуют, добавляя innerHTML
Хорошо, таким образом, мне добавили следующий HTML к сайту с помощью JavaScript/механика. (просто образец)
<ul>
<li><a id='abc'>HEllo</a></li>
<li><a id='xyz'>Hello</a></li>
</ul>
и я также добавил слушателя события щелчка для элементов. Все хорошо работает до этой точки, событие щелчка запущено, когда я нажимаю элемент.
Но... у меня есть другая функция в сценарии, который на определенное условие, изменяет тот HTML, т.е. это добавляет его, таким образом, это похоже:
<ul>
<li><a id='abc'>Hello</a></li>
<li><a id='xyz'>Hello</a></li>
<li><a id='123'>Hello</a></li>
</ul>
но когда это сделано, это повреждает слушателей, которых я добавил для первых двух элементов... ничего не происходит, когда я нажимаю их.
если я комментирую вызов к функции, которая делает добавление, все это начинает работать снова!
справка...
1 ответ
Каждый раз, когда вы устанавливаете свойство innerHTML , вы перезаписываете любой предыдущий HTML-код, который был там установлен. Это включает назначение конкатенации, потому что
element.innerHTML += '<b>Hello</b>';
совпадает с записью
element.innerHTML = element.innerHTML + '<b>Hello</b>';
. Это означает, что все обработчики, не прикрепленные через атрибуты HTML, будут «отсоединены», поскольку элементы, к которым они были прикреплены, больше не существуют, а новый набор элементов имеет заняли их место. Чтобы сохранить все ваши предыдущие обработчики событий, вы должны добавлять элементы, не перезаписывая предыдущий HTML. Лучший способ сделать это - использовать функции создания DOM, такие как createElement и appendChild :
var menu = pmgroot.getElementsByTagName("ul")[0];
var aEl = document.createElement("a");
aEl.innerHTML = "Hello";
aEl.id "123";
menu.appendChild(aEl);