addEventListener ушел после добавления innerHTML

Question

Хорошо, поэтому я добавил следующий html на сайт, используя javascript / greasemonkey. (только образец)

<ul>
 <li><a id='abc'>HEllo</a></li>
 <li><a id='xyz'>Hello</a></li>
</ul>

и я также добавил прослушиватель событий click для элементов. До этого момента все работало нормально, когда я щелкаю элемент, происходит событие click.

Но ... у меня есть другая функция в скрипте, которая при определенных условиях изменяет этот HTML, то есть он добавляет его, поэтому он выглядит так:

<ul>
 <li><a id='abc'>Hello</a></li>
 <li><a id='xyz'>Hello</a></li>
 <li><a id='123'>Hello</a></li>
</ul>

но когда это сделано, это прерывает слушателей, которых я добавил для первых двух элементов ... ничего не происходит, когда я нажимаю на них.

Если я закомментирую вызов функции, которая выполняет добавление, все снова начинает работать!

помогите пожалуйста ...

Answer 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);

Answer 2

U также может использовать «живую» функцию jQuery