innerHTML and event handlers

Tim Fooy · Apr 28, 2004

Hi all,

I have the following problem. In my page i have a large <div> with tags
inside it that have event handlers on them (onclick etc.). When i run
div.innerHTML = moreText + div.innerHTML, either before or after the page
has fully loaded, all of those event handlers are dropped: the actions for
the event are not executed anymore.

I can't find anything related to this problem on the internet. Has anyone
ever encountered a similar problem?

TIA,

regs,

Tim

Mike · Apr 29, 2004

Tim Fooy said:
Hi all,

I have the following problem. In my page i have a large <div> with tags
inside it that have event handlers on them (onclick etc.). When i run
div.innerHTML = moreText + div.innerHTML, either before or after the page
has fully loaded, all of those event handlers are dropped: the actions for
the event are not executed anymore.

I can't find anything related to this problem on the internet. Has anyone
ever encountered a similar problem?

TIA,

regs,

Tim

It's not really a problem, rather it is just the way it works. I suggest
repacing the innerHTML calls with using the DOM
(http://www.quirksmode.org/?dom/contents.html for reference) or just add and
empty SPAN tag or something as the first element in the DIV and perform the
innerHTML on the SPAN element.

William Morris · Apr 29, 2004

That suggests to me that there is a javascript error somewhere that you're
encountering just after the line you show. An error can cause all scripts
on a page to stop functioning - or more precisely, cause the browser to stop
running them. What's going on around that line?

- Wm

Tim Fooy · Apr 29, 2004

Hi all,

It's not really a problem, rather it is just the way it works. I suggest
repacing the innerHTML calls with using the DOM
(http://www.quirksmode.org/?dom/contents.html for reference) or just add and
empty SPAN tag or something as the first element in the DIV and perform the
innerHTML on the SPAN element.

I don't understand that "that's the way it works". Inside another <div> on
my page the same situation happens, and the event handlers inside that <div>
keep working after the innerHTML line.
Anyway, thanks for the suggestions. I'll try them out tomorrow.

Tim

Tim Fooy · Apr 29, 2004

"William Morris" schreef:

That suggests to me that there is a javascript error somewhere that you're
encountering just after the line you show. An error can cause all scripts
on a page to stop functioning - or more precisely, cause the browser to stop
running them. What's going on around that line?

If i comment out the mentioned line, everything keeps working. There is
also no script error indication in the statusbar of IE.

Tim

Tim Fooy · Apr 30, 2004

Tim Fooy said:
I don't understand that "that's the way it works". Inside another <div> on
my page the same situation happens, and the event handlers inside that

keep working after the innerHTML line.
Anyway, thanks for the suggestions. I'll try them out tomorrow.

Both of your solutions solved the problem ;-) Thanks a lot!

Tim

Michael Winter · May 1, 2004

I have the following problem. In my page i have a large <div> with tags
inside it that have event handlers on them (onclick etc.). When i run
div.innerHTML = moreText + div.innerHTML, either before or after the
page has fully loaded, all of those event handlers are dropped: the
actions for the event are not executed anymore.

I can't find anything related to this problem on the internet. Has
anyone ever encountered a similar problem?

Yes. I once tried to wrap a DIV inside another, dynamically created DIV.
All of the event handlers were removed:

<body>
<div id="outerDiv">
<div id="testDiv">
Page content
</div>
</div>
<script type="text/javascript">
var oD = document.getElementById( 'outerDiv' );
var tD = document.getElementById( 'testDiv' );

tD.onclick = function() {
alert( 'original' );
};

oD.innerHTML = '<div>' + oD.innerHTML + '</div>';
</script>
</body>

This even fails if attachEvent() or addEventListener() is used to add the
listener.

The solution for recent browser versions is to use DOM methods to create
and insert new nodes:

<body>
<div id="outerDiv">
<div id="testDiv">
Page content
</div>
</div>
<script type="text/javascript">
var nD = document.createElement( 'DIV' );
var oD = document.getElementById( 'outerDiv' );
var tD = document.getElementById( 'testDiv' );

tD.onclick = function() {
alert( 'original' );
};

nD.appendChild( oD.replaceChild( nD, tD ));
</script>
</body>

Mike

Java7 Applet Status and Event Handlers	2	Apr 26, 2012
Event Handlers... Toggling a Numeric Field	6	Feb 27, 2008
innerHTML?	2	Dec 9, 2005
InnerHTML question	18	Jul 17, 2007
innerHTML with AJAX problem	12	May 9, 2008
Event handlers, OO and function context	5	Sep 11, 2007
Execution order of event handlers	4	Jan 13, 2005
Event Listeners and innerHTML	0	May 25, 2006

innerHTML and event handlers

Tim Fooy

Mike

William Morris

Tim Fooy

Tim Fooy

Tim Fooy

Michael Winter

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads