mouseover not working for dynamic generated li in ie7

Question

I have created a menuItems array and assigned it to a div which has an id of “leftMenu”.

I have a dynamically generated the UL (user list) and LI and it's append to the div.

I have set two attributes “onmouseover”, and “onmouseout” in the dynamically generated LI.

These two attribute do not work in IE7 but IE8, IE9, Firefox, Safari and Chrome it works fine.

CSS:



    ul{margin:0px; padding:0px; width:200px;}
    li{list-style-type:none;}

    .defaultsMenuBtn {
    background-color: #FEE6A0;
    border-bottom: 1px solid #FFFFFF;
    color: #002C84;
    font-weight: bold;
    padding: 3px 5px;
    }

    a{text-decoration:none;}

    .defaultsMenuBtn_hover{background-color: #FFD14F; padding: 3px 5px; border-bottom: 1px solid #FFFFFF;font-weight:bold; color: #002C84; cursor:pointer;}

HTML



    <div id="leftMenu">  </div>

Javascript



    var menuItems=new Array();
    menuItems[0]="menu01";
    menuItems[1]="menu02";
    menuItems[2]="menu03";
    menuItems[3]="menu04"; 

    var menulength = menuItems.length;
    var MenuWapper = document.getElementById("leftMenu");
    var ul = document.createElement("ul");

    MenuWapper.appendChild(ul);

    for(i=0; i<menulength; i++){
    var li = document.createElement("li");
    var itemID = "item_"+i
    li.className = "defaultsMenuBtn";
    li.id = itemID
    var browser = navigator.appName;

    li.setAttribute("onmouseover","this.className='defaultsMenuBtn_hover'");
    li.setAttribute("onmouseout", "this.className='defaultsMenuBtn'");
    li.innerHTML = " "+menuItems[i]+"";
    ul.appendChild(li);

    }// end forloop

Please let me know if any more information is required!

score 0 · Answer 1 · answered Sep 06 '12 at 07:28

0

I’m not 100% sure why it doesn’t work in IE7, but I don’t think .setAttribute('event','fn') is supported in IE7-. You should probably replace:

li.setAttribute("onmouseover","this.className='defaultsMenuBtn_hover'");
li.setAttribute("onmouseout", "this.className='defaultsMenuBtn'");

With

li.onmouseover = function() {
    li.className='defaultsMenuBtn_hover';
}

li.onmouseout = function() {
    li.className='defaultsMenuBtn';
}

Setting inline attributes is not a good way to add listeners anyway, it’s better done in javascript.

answered Sep 06 '12 at 07:28

David Hellsing

106,495
44
176
212

The reason why it doesn't work is because IE7 only has partial support of setAttribute, it doesn't support adding event handlers: http://msdn.microsoft.com/en-us/library/ie/ms536739(v=vs.85).aspx – methodofaction Sep 06 '12 at 07:30
Thanks @Duopixel I knew I had read something like that 6 years ago :) – David Hellsing Sep 06 '12 at 07:32
Thanks David Here have made litter change in code li.className='defaultsMenuBtn_hover'; li.className='defaultsMenuBtn to this.className='defaultsMenuBtn_hover'; this.className='defaultsMenuBtn Now it’s working fine. – ketan sawant Sep 12 '12 at 11:23

score 0 · Answer 2 · edited Oct 16 '16 at 06:36

0

This is because in IE7 DOM has restrictions for dynamically added elements.

You have to use the live() or delegate() method with jQuery.

edited Oct 16 '16 at 06:36

fragilewindows

1,394
1
15
26

answered Sep 06 '12 at 07:33

Gyan Chandra Srivastava

1,370
9
29

ketan sawant · Answer 3 · 2012-09-20T07:10:47.527

0

Thanks David

Here I have made litter change in code

li.className='defaultsMenuBtn_hover';
li.className='defaultsMenuBtn

to

this.className='defaultsMenuBtn_hover';
this.className='defaultsMenuBtn

Now it’s working fine.

edited Sep 20 '12 at 07:10

answered Sep 12 '12 at 11:21

ketan sawant

11
4

mouseover not working for dynamic generated li in ie7

3 Answers3