addEventListener gone after appending innerHTML

by

Any time you set the innerHTML property you are overwriting any previous HTML that was set there. This includes concatenation assignment, because

element.innerHTML += '<b>Hello</b>';

is the same as writing

element.innerHTML = element.innerHTML + '<b>Hello</b>';

This means all handlers not attached via HTML attributes will be “detached”, since the elements they were attached to no longer exist, and a new set of elements has taken their place. To keep all your previous event handlers, you have to append elements without overwriting any previous HTML. The best way to do this is to use DOM creation functions such as createElement and appendChild:

var menu = pmgroot.getElementsByTagName("ul")[0];
var aEl  = document.createElement("a");
aEl.innerHTML = "Hello";
aEl.id "123";
menu.appendChild(aEl);

More Related Contents:

  1. How to trigger event in JavaScript?
  2. Is it possible to append to innerHTML without destroying descendants’ event listeners?
  3. How to pass arguments to addEventListener listener function?
  4. JS li tag onclick not working on IE8
  5. addEventListener using for loop and passing values [duplicate]
  6. How to replace innerHTML of a div using jQuery?
  7. addEventListener in Internet Explorer
  8. MSIE and addEventListener Problem in Javascript?
  9. add event listener on elements created dynamically
  10. Javascript – How to detect if document has loaded (IE 7/Firefox 3)
  11. nodeValue vs innerHTML and textContent. How to choose? [duplicate]
  12. Javascript – Append HTML to container element without innerHTML
  13. How to check whether dynamically attached event listener exists or not?
  14. Binding multiple events to a listener (without JQuery)?
  15. JavaScript get TextArea input via .value or .innerHTML?
  16. Add/remove HTML inside div using JavaScript
  17. Change label text using JavaScript
  18. Javascript Iframe innerHTML
  19. addEventListener on NodeList [duplicate]
  20. Code inside DOMContentLoaded event not working
  21. Why doesn’t document.addEventListener(‘load’, function) work in a greasemonkey script?
  22. Javascript – innerHTML not working with HTML select menus
  23. Append HTML to container element without innerHTML
  24. setting innerHTML with a script inside [duplicate]
  25. JQuery html() vs. innerHTML
  26. find a value of table cell
  27. reading innerHTML of HTML form with VALUE attribute (& its value) of INPUT tags
  28. reactjs event listener beforeunload added but not removed
  29. addEventListener Two Functions
  30. Listen to multiple keydowns

Leave a Comment