Можно ли добавить к innerHTML, не уничтожая слушателей событий потомков? - PullRequest
Новая
       46

Можно ли добавить к innerHTML, не уничтожая слушателей событий потомков?

86 голосов
/ 27 февраля 2009

В следующем примере кода я присоединяю обработчик события onclick к диапазону, содержащему текст «foo». Обработчик является анонимной функцией, которая выдает alert().

Однако, если я назначу родительский узел innerHTML, этот обработчик событий onclick будет уничтожен - нажатие "foo" не сможет вызвать окно предупреждения.

Это поправимо? 

<html>
 <head>
 <script type="text/javascript">

  function start () {
    myspan = document.getElementById("myspan");
    myspan.onclick = function() { alert ("hi"); };

    mydiv = document.getElementById("mydiv");
    mydiv.innerHTML += "bar";
  }

 </script>
 </head>

 <body onload="start()">
   <div id="mydiv" style="border: solid red 2px">
     <span id="myspan">foo</span>
   </div>
 </body>

</html>

Ответы [ 12 ]

0 голосов
/ 09 июля 2010

Я ленивый программист. Я не использую DOM, потому что это похоже на дополнительный набор текста. Для меня, чем меньше кода, тем лучше. Вот как бы я добавил «bar» без замены «foo»: 

function start(){
var innermyspan = document.getElementById("myspan").innerHTML;
document.getElementById("myspan").innerHTML=innermyspan+"bar";
}
0 голосов
/ 27 февраля 2009

Потеря обработчиков событий - это, IMO, ошибка в том, как Javascript обрабатывает DOM. Чтобы избежать такого поведения, вы можете добавить следующее: 

function start () {
  myspan = document.getElementById("myspan");
  myspan.onclick = function() { alert ("hi"); };

  mydiv = document.getElementById("mydiv");
  clickHandler = mydiv.onclick;  // add
  mydiv.innerHTML += "bar";
  mydiv.onclick = clickHandler;  // add
}
Страница:
...