Прослушиватель событий с параметрами и innerHTML работает только один раз - PullRequest
Новая
       16

Прослушиватель событий с параметрами и innerHTML работает только один раз

0 голосов
/ 24 января 2012

У меня есть скрипт, который добавляет текст на страницу, например: 

document.body.innerHTML += '<input type="image" id="alertMeID" style="position:fixed;top:0;left:0" //src="http://i55.tinypic.com/2nly5wz.gif" ///>';
document.body.innerHTML += '<input type="image" id="alertMeID2" style="position:fixed;top:100;left:100" //src="http://i55.tinypic.com/2nly5wz.gif" />';
document.getElementById('alertMeID').addEventListener('click', function(){do_this("some text")}, false);
document.getElementById('alertMeID2').addEventListener('click', function(){do_this("another text")}, false);

function do_this(sendingParameter){document.body.innerHTML += sendingParameter;}

При первом нажатии на одно из изображений оно работает правильно. Но, если я нажму второй раз, это не сработает вообще.

Как решить эту проблему?

Ответы [ 2 ]

4 голосов
/ 24 января 2012

Когда вы используете innerHTML содержимое элемента переопределяется. Элементы удаляются и воссоздаются, что, в свою очередь, удаляет обработчик событий. Намного лучше было бы использовать манипуляции с DOM. 

function do_this(sendingParameter){
    document.body.appendChild(document.createTextNode(sendingParameter));
}

Демо: http://jsfiddle.net/mdtSY/

1 голос
/ 07 февраля 2017

Возможно, вы также захотите взглянуть на: insertAdjacentHTML

В нем указано mdn :

insertAdjacentHTML () анализирует указанный текст как HTML илиXML и вставляет полученные узлы в дерево DOM в указанной позиции.Он не обрабатывает элемент, на котором он используется, и, следовательно, не разрушает существующие элементы внутри этого элемента.Это позволяет избежать дополнительного этапа сериализации, что делает его намного быстрее, чем прямое манипулирование внутренним HTML.

...