mouseover不工作在ie7中動態生成的li

我已經創建了一個menuItems數組並將其分配給一個ID爲「leftMenu」的div。mouseover不工作在ie7中動態生成的li

我有一個動態生成的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

請讓我知道如果有更多informati是必需的！

來源

2012-09-06 ketan sawant

我不是100％確定它爲什麼不能在IE7中工作，但我不認爲.setAttribute('event','fn')在IE7中支持。你或許應該替換：

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做得更好。

來源

2012-09-06 07:28:03 David

它不工作的原因是因爲IE7只支持setAttribute的部分支持，它不支持添加事件處理程序：http://msdn.microsoft.com/en-us/library/ie/ms536739（ v = vs.85）的.aspx – Duopixel

感謝@Duopixel我知道我讀過類似的東西6年前:) – David

感謝大衛這裏取得了垃圾改變代碼 li.className =「defaultsMenuBtn_hover」; li.className ='defaultsMenuBtn 至 this.className ='defaultsMenuBtn_hover'; this.className ='defaultsMenuBtn 現在它工作正常。 –

這是因爲在IE7中DOM對動態添加元素有限制。

您必須使用live()或delegate()方法與jQuery。

來源

2012-09-06 07:33:49

感謝大衛

代碼

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

這裏我已經凋落變化

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

現在它的正常工作。

來源

2012-09-12 11:21:23

mouseover不工作在ie7中動態生成的li

回答

相關問題