jquery hover 함수가 하위 페이지에있는 IE에서 작동하지 않습니다.

jsp를 사용하여 간단한 드롭 다운 메뉴를로드하고 ajax jquery를 사용하여 하위 메뉴를 가져 오는 중입니다.jquery hover 함수가 하위 페이지에있는 IE에서 작동하지 않습니다.

나는 master jsp를 가지고 있으며 사용자가 dropdown jsp를 호출하고 master jsp에 표시하는 버튼을 선택할 때.

파이어 폭스에서는 ajax 호출이 완료되면 기본 메뉴에서 howering하여 모든 하위 메뉴를 볼 수 있습니다 .Ajax 호출 후로드 된 상위 메뉴를 볼 수는 있지만 IE에서는 하위 메뉴. 내가 JSP 정상에 전체 코드를 넣으면 - : 하위 메뉴의 게재에 대한 책임이 호버 기능은 내가 Jquery1.4.4.min.js

참고를 사용하고 있습니다 .. 를 트리거하기되지 않는 것 같다 IE에서 드롭 다운 메뉴가 올바르게 작동합니다. 아약스 호출을 사용하여 페이지를 호출 할 때이 문제에 직면하고있다.

누가 문제인지 파악할 수 있습니까? 다음

는

JSP 코드 스 니펫은 아약스에게

$(function(){ 

    $("ul.dropdown li").hover(function(){ 

     $(this).addClass("hover"); 
     $('ul:first',this).css('visibility', 'visible'); 

    }, function(){ 

     $(this).removeClass("hover"); 
     $('ul:first',this).css('visibility', 'hidden'); 

    }); 

    $("ul.dropdown li ul li:has(ul)").find("a:first").append(" &raquo; "); 

});

이

/* Dropdown style */ 
ul.dropdown { position: relative; width:145px; margin:20px 0px; z-index:9000; } 
ul.dropdown li { list-style:none; zoom: 1; background: #ebebeb; margin-left:0px;} 
ul.dropdown a:hover { color: #000; text-decoration:none;} 
ul.dropdown a:active color: #ffa500; } 
ul.dropdown li a { display: block; padding: 4px 8px; 
    border-bottom: 1px solid #fff; color: #222;text-decoration:none; } 
ul.dropdown li:last-child a { border-right: none; } /* Doesn't work in IE */ 
ul.dropdown li.hover, 
ul.dropdown li:hover { background: #dedede; color: black; position: relative; } 
ul.dropdown li.hover a { color: black; } 

/* LEVEL TWO */ 
ul.dropdown ul { width: 140px; visibility: hidden; 
    position: absolute; top: 0%; left: 140px; z-index:9000; } 
ul.dropdown ul li { font-weight: normal; background: #dedede; color: #000; 
    border-bottom: 1px solid #ccc; float: none; margin:0px; } 

/* IE 6 & 7 Needs Inline Block */ 
ul.dropdown ul li a { border-right: none; display: block; margin: 0px; 
    color:#666; } 

/* LEVEL THREE */ 
ul.dropdown ul ul { left: 100%; top: 0; } 
ul.dropdown li:hover > ul { visibility: visible; }

출처

2011-04-13 deep

중고 CSS 스타일 0123을 사용해보십시오 중고

<ul class="dropdown"> 
<li><a href="#">Books-Videos</a> 



<ul class="sub_menu"> 
      <li><a href="#">Turf Management</a></li> 
       <li><a href="#">Training</a> 
        <ul class="sub_menu"> 
        <li><a href="#">Dugouts</a></li> 
       <li><a href="#">Foul Poles</a></li> 
       <li><a href="#">Netting</a></li> 
       <li><a href="#">Scoreboards</a></li> 
        </ul> 
        </li> 
      </ul> 
      </li> 
     </ul>

띄운 JS 기능을 사용하여 호출 내용이다~ "루트 요소의 특정 집합을 기준으로 현재 또는 미래에 선택기와 일치하는 모든 요소에 대해 하나 이상의 이벤트에 처리기를 연결하십시오." :

$("ul.dropdown").delegate("li", "hover", function() { 
    $(this).addClass("hover"); 
    $('ul:first',this).css('visibility', 'visible'); 
}, function(){ 
    $(this).removeClass("hover"); 
    $('ul:first',this).css('visibility', 'hidden'); 
});

.live 거의가 같은 일을 그러나 .live는 체인에서 사용할 수 없습니다 - 그것은 선택에 직접 사용할 필요가있다. 예 :

// won't work 
$("#foo").children("table").find("tr").live("click",function() {... 

// will work 
$("#foo").children("table").delegate("tr","click",function() {...

또한 .live 크게 성능에 영향을 미칠 수있는 상황이 지정되지 않은 경우 문서 요소로 이벤트 핸들러를 첨부. 이 성능 저하가 명시 적 맥락 (jQuery를 1.4 +와 함께 작동)를 지정하여 완화 할 수 있습니다

$("li",$("ul.dropdown")[0]).live("hover",function() {...

그리고 마지막으로, 당신은 .live 이벤트의 전파를 중지 할 수 없습니다. docs에서 : 그들은 문서의 상단에 전파 한 후에는 .live() 메소드는 이벤트를 처리하기 때문에

, 라이브 이벤트의 전파를 막을 수 없습니다 입니다. 마찬가지로 .delegate()가 처리하는 이벤트는 위임 된 요소 인 으로 항상 전파됩니다. 해당 요소 아래에있는 요소의 이벤트 처리기는 위임 된 이벤트 처리기가 호출 될 때까지 이미 실행 된 입니다.

주저하지 말고 .delegate을 사용하십시오!

출처

2011-04-13 12:35:56 karim79

$("ul.dropdown li").live('hover', function(){}, function(){});

나중에 동적으로 추가 될 dom 요소에 이벤트를 바인딩하기 위해 JQuery.live를 사용하십시오.

http://api.jquery.com/live/

출처

2011-04-13 12:36:06 Peeter

jquery hover 함수가 하위 페이지에있는 IE에서 작동하지 않습니다.

답변

관련 문제