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
};