innerHTML and event handlers

**William Morris** · Jul 23 '05, 10:36 AM

Re: innerHTML and event handlers

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
--
William Morris
Product Development, Seritas LLC
Kansas City, Missouri

"Tim Fooy" <this_is@invali d.com> wrote in message
news:408f6963$0 $21476$a0ced6e1 @news.skynet.be ...[color=blue]
> 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
>
>[/color]

**Mike** · Jul 23 '05, 10:36 AM

Re: innerHTML and event handlers

"Tim Fooy" <this_is@invali d.com> wrote in message
news:408f6963$0 $21476$a0ced6e1 @news.skynet.be ...[color=blue]
> 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[/color]

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.

**Tim Fooy** · Jul 23 '05, 10:36 AM

Re: innerHTML and event handlers

> > Hi all,[color=blue][color=green]
> >
> > 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[/color][/color]
page[color=blue][color=green]
> > has fully loaded, all of those event handlers are dropped: the actions[/color][/color]
for[color=blue][color=green]
> > the event are not executed anymore.
> >
> > I can't find anything related to this problem on the internet. Has[/color][/color]
anyone[color=blue][color=green]
> > ever encountered a similar problem?
> >[/color]
> 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[/color]
and[color=blue]
> empty SPAN tag or something as the first element in the DIV and perform[/color]
the[color=blue]
> innerHTML on the SPAN element.[/color]

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** · Jul 23 '05, 10:36 AM

Re: innerHTML and event handlers

"William Morris" schreef:[color=blue]
> 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[/color]
stop[color=blue]
> running them. What's going on around that line?[/color]

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** · Jul 23 '05, 10:37 AM

Re: innerHTML and event handlers

"Tim Fooy" wrote:[color=blue][color=green][color=darkred]
> > > Hi all,
> > >
> > > I have the following problem. In my page i have a large <div> with[/color][/color][/color]
tags[color=blue][color=green][color=darkred]
> > > inside it that have event handlers on them (onclick etc.). When i run
> > > div.innerHTML = moreText + div.innerHTML, either before or after the[/color][/color]
> page[color=green][color=darkred]
> > > has fully loaded, all of those event handlers are dropped: the actions[/color][/color]
> for[color=green][color=darkred]
> > > the event are not executed anymore.
> > >
> > > I can't find anything related to this problem on the internet. Has[/color][/color]
> anyone[color=green][color=darkred]
> > > ever encountered a similar problem?
> > >[/color]
> > 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[/color]
> and[color=green]
> > empty SPAN tag or something as the first element in the DIV and perform[/color]
> the[color=green]
> > innerHTML on the SPAN element.[/color]
>
> I don't understand that "that's the way it works". Inside another <div>[/color]
on[color=blue]
> my page the same situation happens, and the event handlers inside that[/color]
<div>[color=blue]
> keep working after the innerHTML line.
> Anyway, thanks for the suggestions. I'll try them out tomorrow.[/color]

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

Tim

**Michael Winter** · Jul 23 '05, 10:38 AM

Re: innerHTML and event handlers

On Wed, 28 Apr 2004 10:21:14 +0200, Tim Fooy <this_is@invali d.com> wrote:
[color=blue]
> 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?[/color]

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.getEle mentById( 'outerDiv' );
var tD = document.getEle mentById( 'testDiv' );

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

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

This even fails if attachEvent() or addEventListene r() 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.create Element( 'DIV' );
var oD = document.getEle mentById( 'outerDiv' );
var tD = document.getEle mentById( 'testDiv' );

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

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

Mike

--
Michael Winter
M.Winter@blueyo nder.co.invalid (replace ".invalid" with ".uk" to reply)

innerHTML and event handlers

innerHTML and event handlers

Comment

Comment

Comment

Comment

Comment

Comment