Comments on: Manipulating innerHTML removes events

By: zcorpan

zcorpan — Tue, 01 Jan 2008 23:01:44 +0000

Another way around this problem is to create your own appendHTML() method like so:

HTMLElement.prototype.appendHTML = function(s) {
var div = document.createElement(’div’);
div.innerHTML = s;
while (div.firstChild)
this.appendChild(div.firstChild);
}

This does what you thought “innerHTML +=” did (except that script blocks inserted this way will be executed).

By: AdvancED DOM Scripting » Out from under the carpet

AdvancED DOM Scripting » Out from under the carpet — Tue, 16 Oct 2007 01:07:33 +0000

[...] Bit had a post about events disappearing after using innerHTML to modify the DOM. When you add events using the [...]

By: Emil Stenström

Emil Stenström — Thu, 04 Oct 2007 20:19:34 +0000

@Anders Ringqvist: Very interesting technique, thanks for linking! If I understand it correctly it’s simply setting a listener on the outermost element, and waiting for the event to bubble there. Good way to avoid this problem.

By: Anders Ringqvist

Anders Ringqvist — Wed, 03 Oct 2007 13:22:01 +0000

A viable soultion could be to use event delegation instead of ”classic” event handling.

I let Christian Heilmann speak:

http://icant.co.uk/sandbox/eventdelegation/

By: Emil Stenström

Emil Stenström — Fri, 28 Sep 2007 19:55:56 +0000

@Jose Carrero: Many believe (including me) that adding things inline in the code like that is littering. You attach behaviour into the structure of the document. JS files should add their events from an external file, with onclick or something fancier.

By: Robert Nyman

Robert Nyman — Fri, 28 Sep 2007 13:59:47 +0000

Freddy,

Thanks for explaining that! It threw us off for a while, so we just needed to think in alternate terms. In this case it was an AJAX call that could return any kind of HTML code, so using proper DOM methods wasn’t a viable option.

By: Ara Pehlivanian

Ara Pehlivanian — Fri, 28 Sep 2007 13:54:30 +0000

Yeah, I came across this problem when writing an Ajax driven playlist for a project here at work. I was adding the new contents to the DOM with innerHTML and had to rebind all of the events for the entire list every time. Using DOM methods though will avoid this problem.

By: Jose Carrero

Jose Carrero — Thu, 27 Sep 2007 18:13:10 +0000

Maybe i’m missing something but why add the onClick event using span.onclick=function()?, if you put the “onClick” inside the HTML tag it works fine even after the innerHTML change

By: Kalle Persson

Kalle Persson — Thu, 27 Sep 2007 17:38:51 +0000

Nice, I did not know this.

Johan Lind:
Look at the source of the example page, the JavaScript isn’t supposed to do anything when you click the span, because of the innerHTML change.

By: Johan Lind

Johan Lind — Thu, 27 Sep 2007 16:44:38 +0000

Hmm, nothing happens when I click on any of those elements in Safari and Camino.
Is this an IE only thing?

By: Emil Stenström

Emil Stenström — Thu, 27 Sep 2007 16:19:20 +0000

@Freddy: Ah, thanks. It makes even more sense then.

By: Freddy

Freddy — Thu, 27 Sep 2007 13:17:25 +0000

@Emil: I didn’t want to sound elitist, sorry if it came across as such. JFTR: In JavaScript, there is no “adding to” strings; Adding using the unary + (”+=”) is just a “shorthand” for reading, adding, and reassigning values (internally, they convert number/string types, but that’s not relevant in this context).

By: Emil Stenström

Emil Stenström — Thu, 27 Sep 2007 13:11:20 +0000

@Freddy: Good that you found it obvious, I just had to think for a while before it came to me. I thought I might save someone’s time by stating it, but deeming by your tone I might have been wrong about that.

As you said, the confusing part here is that adding to and replacing innerHTML is the same.

Thanks for commenting.

By: Freddy

Freddy — Thu, 27 Sep 2007 10:55:00 +0000

I’ll have to call ‘duh’ on that one. Obviously, events on an element cannot be retained if the element is replaced by a completely different string using innerHTML. You basically throw away that part of the DOM and write it new. Don’t have to tell you that.

The only thing slightly noteworthy is that this also applies when using the + unary operator (”+=”). And given that it is required to call GetValue() and return the sum, which is in turn written back as a whole, it is not very surprising.

By: Emil Stenström

Emil Stenström — Thu, 27 Sep 2007 07:49:13 +0000

@Nate: No, using DOM methods instead keeps the events as they should be. That’s one workaround. The other one is to attach events after using innerHTML.