On Wed, 28 Apr 2004 10:21:14 +0200, Tim Fooy <th*****@invalid.com> wrote:
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
--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)
