How do you add event handlers to DOM created elements in IE?

[Bob90]

Hello again,

so, How do you add event handlers to DOM created elements in IE?

I have been using





//Add element via DOM
//Add <a> to <div>
var temp_obj = document.createElement("a");

temp_obj.setAttribute("id","id"+randId+"_a");
temp_obj.setAttribute("href",tempAr[0]);
temp_obj.setAttribute("target",tempAr[1]);

temp_obj.setAttribute("onmouseover",rolloverTxtOn+" "+scaleTxtOn+" ,goTo='"+tempAr[0]+"'");
temp_obj.setAttribute("onmouseout",rolloverTxtOff+" "+scaleTxtOff+" ,goTo=''");

document.getElementById("radialMenu").appendChild(temp_obj);
//alert(document.getElementById("id"+randId+"_a").onmouseover)

if(document.attachEvent && !document.addEventListener)
{
temp_obj = document.getElementById("id"+randId+"_a");
temp_obj.attachEvent("onmouseover",function(){rollover('id'+randId,picDir+tempAr[3]);highlight('id'+randId+'');goTo=tempAr[0];} );
temp_obj.attachEvent("onmouseout",function(){rollover('id'+randId,picDir+tempAr[2]);lowlight('id'+randId+'');goTo='';} );
}
rolloverTxtOn+scaleTxtOn+",goTo='"+tempAr[0]+"'";
//temp_obj.onmouseout = rolloverTxtOff+" "+scaleTxtOff+" ,goTo=''";
temp_obj = null;




Becasue the setAttribute does not seem to work in IE.

When I tried attachEvent, the handlers breaks and only works for the last dynamically created element. What I mean is that I have 9 elements and when I rollover them, they all call the rollover of the last element.


Thanks in advance
:)

[Bob90]

if it helps here is the code for the whole section




var y=0;
for(var x=fromItem; x<menuItemsAr.length; x++)
{
var tempAr = menuItemsAr[x].split("|"); //split menu object into array
if(!tempAr[4]){tempAr[4]=""}; //title text
var randId = parseInt(Math.random()*10000000); //make random Id to fudge call

var rolloverTxtOn = ""; //initiate rollover text
var rolloverTxtOff = ""; //initiate rolloff text
if(tempAr[3]&&tempAr[3]!=""); //if menu object has link for rollover
{
rolloverTxtOn = "rollover('id"+randId+"','"+picDir+tempAr[3]+"')";
rolloverTxtOff = "rollover('id"+randId+"','"+picDir+tempAr[2]+"')";
}

var splitter = (rolloverTxtOn!="")? ",":"Javascript:"; //If rollover called then need a ',' if not then need 'Javascrript' within href

var scaleTxtOn = "";
var scaleTxtOff = "";
if(circle_menu_item_dimension_increase!=0 && parseInt(circle_menu_item_dimension_increase%2) == 0)
{
scaleTxtOn=splitter+"highlight('id"+randId+"')";
scaleTxtOff=splitter+"lowlight('id"+randId+"')";
}

//Add element via DOM
//Add <a> to <div>
var temp_obj = document.createElement("a");

temp_obj.setAttribute("id","id"+randId+"_a");
temp_obj.setAttribute("href",tempAr[0]);
temp_obj.setAttribute("target",tempAr[1]);

temp_obj.setAttribute("onmouseover",rolloverTxtOn+" "+scaleTxtOn+" ,goTo='"+tempAr[0]+"'");
temp_obj.setAttribute("onmouseout",rolloverTxtOff+" "+scaleTxtOff+" ,goTo=''");

document.getElementById("radialMenu").appendChild(temp_obj);
//alert(document.getElementById("id"+randId+"_a").onmouseover)

if(document.attachEvent && !document.addEventListener)
{
//temp_obj = document.getElementById("id"+randId+"_a");
//temp_obj.attachEvent("onmouseover",function(){rollover('id'+randId,picDir+tempAr[3]);highlight('id'+randId+'');goTo=tempAr[0];} );
//temp_obj.attachEvent("onmouseout",function(){rollover('id'+randId,picDir+tempAr[2]);lowlight('id'+randId+'');goTo='';} );
}
//temp_obj.id = "id"+randId+"_a";
temp_obj = document.getElementById("id"+randId+"_a");
temp_obj.onmouseover = rolloverTxtOn+scaleTxtOn+",goTo='"+tempAr[0]+"'";
temp_obj.onmouseout = rolloverTxtOff+" "+scaleTxtOff+" ,goTo=''";
temp_obj = null;


//Add <img> to <a>
var temp_style = {"position":"absolute", "width":circle_menu_item_dimension+"px", "height":circle_menu_item_dimension+"px", "border":"0px", "left":(parseInt((circle_menu_dimension/2)+(circle_menu_radius*Math.sin(y*min_angle_between_items)))-parseInt(circle_menu_item_dimension/2))+"px", "top":(parseInt((circle_menu_dimension/2)-(circle_menu_radius*Math.cos(y*min_angle_between_items)))-parseInt(circle_menu_item_dimension/2))+"px", "z-index":101};
var temp_src = picDir+tempAr[2];
menuItemx = addImg(document.getElementById("id"+randId+"_a"), "id"+randId, temp_src, temp_style);
menuItemx.setAttribute("title",tempAr[4]);

temp_obj = null;
menuItemx = null;

y++
}

[Twey]

temp_obj.setAttribute("onmouseover",rolloverTxtOn+" "+scaleTxtOn+" ,goTo='"+tempAr[0]+"'");
temp_obj.setAttribute("onmouseout",rolloverTxtOff+" "+scaleTxtOff+" ,goTo=''");
Not like this. Event handlers are functions, not strings:
temp_obj.onmouseover = function(e) {
// Code here
};