onmouseover for the last of several generated divs will not work in IE

Question

I have a JavaScript function:

function addTool(id, text, tool, pic) {
   var container = getById('infobox');
   var origimg = getById('tempimg').src;
   container.innerHTML += "<div id='" + id + "' class='toolText'>" + text + "<br><img      class='toolImg' src='img/tools/" + tool + "'></div>";
   getById(id).setAttribute('onMouseOver', "mOver('"+ id +"', '" + pic + "');");
   getById(id).setAttribute('onMouseOut', "mOut('"+ id +"', '" + origimg + "');");
   getById(id).setAttribute('href', 'javascript:mClick(id);');
}

Which generates several divs, using this code:

addTool("1p", "Bar", "tool1.jpg", 'img/p&g-part-2_skiss1-2.jpg');
addTool("2p", "Tube", "tool1.jpg", 'img/p&g-part-2_skiss1-2.jpg');
addTool("3p", "Rotating", "tool1.jpg", 'img/p&g-part-2_skiss1-2.jpg');

The mouse events work fine in all major browsers except IE. It seems that all divs except the last will have the mouse event in lowercase which will have the mouse event exactly as written, with upper case letters.
All mouse events will fire except for the last div, even if I write onmouseover instead of say ONmouseOVER, which works fine on all except the last.

Not sure of the answer to this one, although I noticed your setting your DIV id's to 1p, 2p, 3p. ID's should start with a letter not a number. For more info [read this](http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html#answer-79022) — Adam Tomat, Oct 17 '12 at 14:59

epascarello · Answer 1 · 2012-10-17T15:13:00.870

Do not use setAttribute to add events. Use attachEventListener/addEvent

The problem you have is adding the elements to the div. You are basically wiping it away each time when you are adding the new elements. That is bad. You should be using appendChild to add new content to the div.

Basic idea:

function attachEvent(elem, eventName, fn) {
    if ( elem.attachEvent ) {
        elem.attachEvent( 'on' + eventName, fn);
    } else {
        elem.addEventListener( eventName, fn, false );
    }
}


function addTool(text, message) {

   var container = document.getElementById('infobox');
   var newTool = document.createElement("a");
   newTool.innerHTML = text;
   newTool.href="#";
   var myClickFnc = function(e) {
       alert(message);
       return false;
   }
   attachEvent(newTool, "click", myClickFnc);
   container.appendChild(newTool);
}

addTool("cat","meow");
addTool("dog","bark");
addTool("pig","oink");

running example

It seems you were correct in that the setAttribute was the culprit. Although I decided to declare the mouse events in inline instead of using your solution. Thanks! — Glinkis, Oct 18 '12 at 06:50
Why would you declare them inline? That is a poor choice since it is a bad practice. You could always do this too which works in all browsers. `newTool.onclick = function(){ alert("a"); };` — epascarello, Oct 18 '12 at 12:28

score 1 · Accepted Answer · edited Apr 11 '18 at 11:59

Just as @epascarello pointed out, it seems that the setAttribute was the culprit, so I resolved it by setting the events in inline, such as this:

function addTool(id, text, tool, pic) {
    var container = getById('infobox');
    var origimg = getById('tempimg').src;
    container.innerHTML += "<div id='" + id + "' class='toolText'"  +
    "onmouseover=\"mOver('"+ id +"', '" + pic + "');\" "            +
    "onmouseout=\"mOut('"+ id +"', '" + origimg + "');\" "          +
    "onclick=\"mClick(id);\""                                       +
    ">" + text + "<br><img class='toolImg' src='img/tools/" + tool + "'></div>";
}

Which worked just fine in all browsers, including IE.

score -1 · Answer 3 · edited May 23 '17 at 12:04

-1

You could do this part with JQuery:

$("#"+ id).mouseover(function() {
  mOver('"+ id +"', '" + pic + "');
});

You can even take this a lot further:

https://stackoverflow.com/a/4158203/190596

edited May 23 '17 at 12:04

Community

1
1

answered Oct 17 '12 at 15:00

Stijn Geukens

15,454
8
66
101

onmouseover for the last of several generated divs will not work in IE

3 Answers3