[英]mouseover not working for dynamic generated li in ie7
I have created a menuItems array and assigned it to a div which has an id of “leftMenu”. 我创建了一个menuItems数组,并将其分配给ID为“ leftMenu”的div。
I have a dynamically generated the UL (user list) and LI and it's append to the div. 我有一个动态生成的UL(用户列表)和LI,并将其附加到div。
I have set two attributes “onmouseover”, and “onmouseout” in the dynamically generated LI. 我在动态生成的LI中设置了两个属性“ onmouseover”和“ onmouseout”。
These two attribute do not work in IE7 but IE8, IE9, Firefox, Safari and Chrome it works fine. 这两个属性在IE7中不起作用,但IE8,IE9,Firefox,Safari和Chrome可以正常工作。
CSS: 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 的HTML
<div id="leftMenu"> </div>
Javascript Java脚本
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! 请让我知道是否需要更多信息!
I'm not 100% sure why it doesn't work in IE7, but I don't think .setAttribute('event','fn')
is supported in IE7-. 我不确定100%为什么它在IE7中不起作用,但我认为IE7-不支持.setAttribute('event','fn')
。 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. 无论如何,设置内联属性都不是添加侦听器的好方法,最好在javascript中完成。
This is because in IE7 DOM has restrictions for dynamically added elements. 这是因为在IE7中,DOM对动态添加的元素有限制。
You have to use the live()
or delegate()
method with jQuery. 您必须在jQuery中使用live()
或delegate()
方法。
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. 现在一切正常。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.