Filed under JS
Manipulating innerHTML removes events
Others have written about this before, but I thought I’d mention it again, just so you don’t miss it. Aleksandar Vacić found it while playing with tables and their cells. I found it when Robert and I played with nested lists. It works the same across browers. Let me show a quick example:
You have a paragraph tag that contains a span that you want to make clickable.
<p id="para">
<span id="clickspan">This is clickable.</span>
But this is not.
</p>To make it clickable you don’t do any fancy stuff, you just add it with onclick:
var span = document.getElementsById("clickspan");
span.onclick = function() {
alert("You clicked the span!");
}All fine. You click the span and it just works. But then you remember something. You want to add some text to the end of the paragraph, and you decide to do this with javascript. You add the following line to the end of the script:
var p = document.getElementById("para");
p.innerHTML += " Some extra text";You try clicking the span again, and it doesn work. You scratch your hair, you bite your nails, you scream of desperation and anger. It still doesn’t work. It seems manipulating an element by using innerHTML removes all events from that element, and all children. Here’s a live example. I thought you should know.
- Emil Stenström
- 26 Sep, 2007, JS
Feel free to leave a comment, or subscribe to my feed.
linkback
These people have linked to this article:
- AdvancED DOM Scripting » Out from under the carpet 16 Oct, 2007
To get a link in this list: make sure your blogging software supports trackbacks or pingbacks and simply link to this article like this:
<a href="http://friendlybit.com/js/manipulating-innerhtml-removes-events/">Manipulating innerHTML removes events</a>You can also trackback by copying this link, and pasting it into a trackback field in your blogging tool.
