Organizational Research By

Surprising Reserch Topic

is it possible to append to innerhtml without destroying descendants onclick fu


is it possible to append to innerhtml without destroying descendants onclick fu  using -'javascript,html'

In the following example code, I attach an onclick handler to the span containing the text "foo". The handler is an anonymous function that pops up an alert().

However, if I append to the parent node's innerHTML, this onclick handler gets destroyed -- clicking "foo" fails to pop up the alert box.

Is this fixable?

<html>
 <head>
 <script type="text/javascript">

  function start () {
    myspan = document.getElementById("myspan");
    myspan.onclick = function() { alert ("hi"); };

    mydiv = document.getElementById("mydiv");
    mydiv.innerHTML += "bar";
  }

 </script>
 </head>

 <body onload="start()">
   <div id="mydiv" style="border: solid red 2px">
     <span id="myspan">foo</span>
   </div>
 </body>

</html>

    

asked Sep 8, 2015 by rajesh
0 votes
18 views



Related Hot Questions

6 Answers

0 votes
As a slight (but related) asside, if you use a javascript library such as jquery (v1.3) to do your dom manipulation you can make use of live events whereby you set up a handler like: $("#myspan").live("click", function(){ alert('hi'); }); and it will be applied to that selector at all times during any kind of jquery manipulation. For live events see: docs.jquery.com/events/live for jquery manipulation see: docs.jquery.com/manipulation
answered Sep 8, 2015 by rajesh
0 votes
Unfortunately, assignment to innerHTML causes the destruction of all child elements, even if you're trying to append. If you want to preserve child nodes (and their event handlers), you'll need to use DOM functions: function start() { var myspan = document.getElementById("myspan"); myspan.onclick = function() { alert ("hi"); }; var mydiv = document.getElementById("mydiv"); mydiv.appendChild(document.createTextNode("bar")); } Edit: Bob's solution, from the comments. Post your answer, Bob! Get credit for it. :-) function start() { var myspan = document.getElementById("myspan"); myspan.onclick = function() { alert ("hi"); }; var mydiv = document.getElementById("mydiv"); var newcontent = document.createElement('div'); newcontent.innerHTML = "bar"; while (newcontent.firstChild) { mydiv.appendChild(newcontent.firstChild); } }
answered Sep 8, 2015 by rajesh
0 votes
I created my markup to insert as a string since it's less code and easier to read than working with the fancy dom stuff. Then I made it innerHTML of a temporary element just so I could take the one and only child of that element and attach to the body. var html = '
'; html += 'Hello div!'; html += '
'; var tempElement = document.createElement('div'); tempElement.innerHTML = html; document.getElementsByTagName('body')[0].appendChild(tempElement.firstChild);
answered Sep 8, 2015 by rajesh
0 votes
Losing event handlers is, IMO, a bug in the way Javascript handles the DOM. To avoid this behavior, you can add the following: function start () { myspan = document.getElementById("myspan"); myspan.onclick = function() { alert ("hi"); }; mydiv = document.getElementById("mydiv"); clickHandler = mydiv.onclick; // add mydiv.innerHTML += "bar"; mydiv.onclick = clickHandler; // add }
answered Sep 8, 2015 by rajesh
0 votes
I'm a lazy programmer. I don't use DOM because it seems like extra typing. To me, the less code the better. Here's how I would add "bar" without replacing "foo": function start(){ var innermyspan = document.getElementById("myspan").innerHTML; document.getElementById("myspan").innerHTML=innermyspan+"bar"; }
answered Sep 8, 2015 by rajesh
0 votes
You could do it like this: var anchors = document.getElementsByTagName('a'); var index_a = 0; var uls = document.getElementsByTagName('UL'); window.onload=function() {alert(anchors.length);}; for(var i=0 ; ihttp://g.etfv.co/" + anchors[index_a++] + "\" width=\"32\" height=\"32\" /> " + first; lis[j].innerHTML = string; } }
answered Sep 8, 2015 by rajesh

...