mouseover 不适用于 ie7 中动态生成的 li答案

【问题标题】：mouseover not working for dynamic generated li in ie7mouseover 不适用于 ie7 中动态生成的 li
【发布时间】：2012-09-06 07:25:01
【问题描述】：

我创建了一个 menuItems 数组并将其分配给一个 id 为“leftMenu”的 div。

我有一个动态生成的 UL（用户列表）和 LI，它附加到 div。

我在动态生成的LI中设置了“onmouseover”和“onmouseout”两个属性。

这两个属性在 IE7 中不起作用，但在 IE8、IE9、Firefox、Safari 和 Chrome 中可以正常工作。

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

如果需要更多信息，请告诉我！

【问题讨论】：

标签： javascript internet-explorer-7 ie7.js

【解决方案1】：

我不是 100% 确定为什么它在 IE7 中不起作用，但我认为 IE7 不支持 .setAttribute('event','fn')。您可能应该替换：

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

有

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

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

无论如何，设置内联属性并不是添加监听器的好方法，最好用 javascript 来完成。

【讨论】：

之所以不起作用是因为IE7只部分支持setAttribute，不支持添加事件处理程序：msdn.microsoft.com/en-us/library/ie/ms536739(v=vs.85).aspx
谢谢@Duopixel 我知道我在 6 年前读过类似的东西 :)
感谢 David 这里对代码进行了一些改动 li.className='defaultsMenuBtn_hover'; li.className='defaultsMenuBtn to this.className='defaultsMenuBtn_hover'; this.className='defaultsMenuBtn 现在它工作正常了。

【解决方案2】：

谢谢大卫

这里我对代码做了一些改动

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

到

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

现在一切正常。

【讨论】：

【解决方案3】：

这是因为在 IE7 中 DOM 对动态添加的元素有限制。

您必须在 jQuery 中使用 live() 或 delegate() 方法。

【讨论】：