2012-09-06 4 views
1

menuItems 배열을 만들고 id가 "leftMenu"인 div에 할당했습니다.ie7에서 동적 생성 된 li에 대해 mouseover가 작동하지 않습니다.

동적으로 생성 된 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> 

자바 스크립트



    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 경우 에 필요합니다!

답변

0

IE7에서 작동하지 않는 이유를 100 % 확신 할 수는 없지만 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'; 
} 

으로 어쨌든 리스너를 추가하는 좋은 방법이 아닌, 더 나은 자바 스크립트에서 이루어집니다.

+0

IE7은 setAttribute를 부분적으로 지원하기 때문에 작동하지 않는 이유는 이벤트 처리기를 추가하는 것을 지원하지 않기 때문입니다. http://msdn.microsoft.com/en-us/library/ie/ms536739 (내가 li.className = 코드 6 년 전 같은 : – Duopixel

+0

감사를 .aspx로 'defaultsMenuBtn_hover'; li.className = 'defaultsMenuBtn ~ this.className ='defaultsMenuBtn_hover '; this.className = 'defaultsMenuBtn 이제 제대로 작동합니다. – David

+0

감사합니다 뭔가 데이비드 여기서 만든 쓰레기 변화를 읽을 알고 있었다 @Duopixel V = VS.85)는 –

0

IE7에서는 동적으로 추가 된 요소에 제한이 있기 때문입니다.

live() 또는 delegate() 메서드를 jQuery와 함께 사용해야합니다.

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

에 코드

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

에서

0

감사 데이비드

여기에 내가 만든 쓰레기 변화는 지금은 잘 작동합니다.