Unable to trigger event in IE during clonning

JavaScript
1

Following is the code which will clone a set of div with their events(onclick) which is working fine for FF but in case of IE it is not firing events associated with each div.

<html>
<head>
<style type=‘text/css’>
.firstdiv{
border:1px solid red;
}
</style>

&lt;script language="JavaScript"&gt;
function show_tooltip(idx,condition,ev) {
    alert(idx +"=="+condition+"=="+ev);
}

function createCloneNode () {
    var cloneObj = document.getElementById("firstdiv").cloneNode(true);
    document.getElementById("maindiv").appendChild(cloneObj);
}
function init(){
 var mainDiv = document.createElement("div");
 mainDiv.id = 'maindiv';
 var firstDiv = document.createElement("div");
 firstDiv.id ='firstdiv';
 firstDiv.className ='firstdiv';
 for(var j=0;j&lt;4;j++) {
   var summaryDiv = document.createElement("div");
        summaryDiv.id = "sDiv"+j
        summaryDiv.className ='summaryDiv';
        summaryDiv.onmouseover = function() {this.setAttribute("style","text-decoration:underline;cursor:pointer;");}
        summaryDiv.onmouseout = function() {this.setAttribute("style","text-decoration:none;");}
        summaryDiv.setAttribute("onclick", "show_tooltip("+j+",'view_month',event)");
        summaryDiv.innerHTML = 'Div'+j;
       firstDiv.appendChild(summaryDiv);
 } 

 mainDiv.appendChild(firstDiv);
 var secondDiv = document.createElement("div");
 var linkDiv = document.createElement("div");
 linkDiv.innerHTML ='create clone of above element';
 linkDiv.onclick = function() {
    createCloneNode();
 }
 secondDiv.appendChild(linkDiv);
 mainDiv.appendChild(secondDiv);
 document.body.appendChild(mainDiv);
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;script language="JavaScript"&gt;
init()
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

can anybody tell me whats the problem in above code please correct me…

2

Dynamically created events are lost in the cloning process, also the id must be changed to be unique.

Event delegation is a better way to approach the problem.

3

A few more problems:

for(var j=0;j<4;j++) {
var summaryDiv = document.createElement("div");
summaryDiv.id = "sDiv"+j;
summaryDiv.className ='summaryDiv';
restoreEvents(summaryDiv, j)
// IE can't do [I]setAttribute("style","[/I]
// swapping className could be used
summaryDiv.onmouseover = function() {this.style.cssText = "text-decoration:underline;cursor:pointer;";};
summaryDiv.onmouseout = function() {this.style.cssText = "text-decoration:none;";};
// create property, passing a loop variable doesn't work
summaryDiv.count = j;
summaryDiv.onclick = show_tooltip;
summaryDiv.innerHTML = 'Div'+j;
firstDiv.appendChild(summaryDiv);
}

and

function show_tooltip(e) {
var e = e || window.event;
var target = e.srcElement || e.target;
alert(target.count +"=="+e.type);
}