Sleepiness in Seattle » dom http://stanblog.jojoyao.com Stanley's Chat on the Technology and Business Tue, 21 Apr 2009 04:29:08 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 innerHTML could invalidate the event handlers of its child elements http://stanblog.jojoyao.com/2007/05/innerhtml-could-invalidate-the-event-handlers-of-its-child-elements/?utm_source=rss&utm_medium=rss&utm_campaign=innerhtml-could-invalidate-the-event-handlers-of-its-child-elements http://stanblog.jojoyao.com/2007/05/innerhtml-could-invalidate-the-event-handlers-of-its-child-elements/#comments Fri, 11 May 2007 04:48:10 +0000 Stanley Yao http://stanblog.jojoyao.com/newblog/?p=40 In Javascript, using an element’s innerHTML property to dynamically edit its content provides much flexibility and convenience.  But special care needs to be taken when using it, because it could bite you silently.  Take one of my experiences as an example, it could break the event handlers of the child elements.  Sample code as the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>innerHTML</title>
</head>
<body>

<hr /><div id="myd"></div><hr />

<script language="javascript">
function myaction()
{
    alert("hello");
}

var d1 = document.createElement("div");
d1.onclick = myaction;
d1.innerHTML = "child div";

var d = document.getElementById("myd");
d.appendChild(d1);
//d.innerHTML += "parent div";
</script>

</body>
</html>

This code works well and when you click on div, "hello" will pop up.  However if you uncomment the last line of the JavaScript code.  The message won’t pop up any more.  innerHTML manipulates the content of the element as a string instead of DOM, so it might just break the underlying "wires" that hooks up the elements and their event handlers.  So watch out, when any of the events stops working as expected, look for the evil "innerHTML" first.

]]> http://stanblog.jojoyao.com/2007/05/innerhtml-could-invalidate-the-event-handlers-of-its-child-elements/feed/ 0