mouseover не работает для динамического сгенерированного li в ie7

Я создал массив elementsItems и назначил его div, который имеет идентификатор «leftMenu».mouseover не работает для динамического сгенерированного li в ie7

У меня есть динамически созданный UL (список пользователей) и LI, и он добавляется к div.

Я установил два атрибута «onmouseover» и «onmouseout» в динамически сгенерированном LI.

Эти два атрибута не работают в 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

Пожалуйста, дайте мне знать, если больше информации в сфере требуется!

источник

2012-09-06 ketan sawant

Я не уверен на 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.

источник

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

Спасибо David Вот сделали изменения подстилки в коде li.className = чтение «defaultsMenuBtn_hover»; li.className = 'defaultsMenuBtn до это.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 не работает для динамического сгенерированного li в ie7

ответ

Смежные вопросы