jquery가 외부 HTML에서 메뉴를로드하지만 애니메이션이 작동하지 않습니다.

Question

jquery에서 슬라이드하는 탐색을 만들었습니다. 그것은 완벽하게 작동하지만 별도의 HTML 파일에 메뉴 (정렬되지 않은 목록)를 갖고 싶다면 변경하면 모든 사이트 페이지에서 구현됩니다.

나는 하위 메뉴가 더 이상

을 슬라이드 사업부 "menucontainer"나는 메뉴 위에 마우스를 올려 때

$(document).ready(function(){ 

$("#menucontainer").append(

    $('<div>').load('navigation.html') 
    ); 
}); 

메뉴의 최상위 그러나 표시에 html 파일을로드하지하려면 다음 코드를 사용 여기

애니메이션 코드 여기

$("#nav li").hoverIntent({sensitivity: 7, interval: 10, over: showNav, timeout: 20, out: hideNav}); 

function showNav() { 
$("ul", this).slideDown(500); 

} 

function hideNav() { 
$("ul", this).stop(true, true).slideUp(500); 

}; 

이다 navigation.html이다

,536,913,632 10

<ul id="nav"> 
    <li id= "1"><a href="#">CARS</a> 
    <ul> 
    <li id= "11"><a href="#" class="clicked_link">Link1</a></li> 
    </ul></li> 
    <li id= "2"><a href="#" class=>NEWS/EVENTS</a> 
     <ul> 
      <li id= "21"><a href="#" class="clicked_link">Latest News</a></li> 
      <li id= "22"><a href="#" class="clicked_link">Upcoming Events</a></li> 
      <li id= "23"><a href="#" class="clicked_link">Calendar</a></li> 
      <li id= "24"><a href="#" class="clicked_link">Research and Development</a></li> 
     </ul> 
     <div class="clear"></div> 
    </li> 
    <li id= "3"><a href="#" class=>SERVICES</a> 
    <ul> 
     <li id= "31"><a href="#" class="clicked_link">Dealer Locator</a></li> 
     <li id= "32"><a href="#" class="clicked_link">Hire Cars</a></li> 
     <li id= "33"><a href="#" class="clicked_link">Finance</a></li> 
     <li id= "34"><a href="#" class="clicked_link">Insurance</a></li> 
     <li id= "35"><a href="#" class="clicked_link">Used Car Locator</a></li> 
     <li id= "36"><a href="#" class="clicked_link">Factory Visits</a></li> 
     <li id= "37"><a href="#" class="clicked_link">Chassis Records</a></li> 
     <li id= "38"><a href="#" class="clicked_link">Contact Us</a></li> 
    </ul>   
     <div class="clear"></div> 
    </li> 
    <li id= "4"><a href="#" class=>MEDIA</a> 
    <ul> 
     <li id= "41"><a href="#" class="clicked_link">Video</a></li> 
     <li id= "42"><a href="#" class="clicked_link">Images</a></li> 
     <li id= "43"><a href="#" class="clicked_link">Press Releases</a></li> 
    </ul>   
     <div class="clear"></div> 
    </li> 
    <li id= "5"><a href="#" class=>SHOP</a> 
    <ul> 
     <li id= "51"><a href="#" class="clicked_link">Online Store</a></li> 
    </ul>   
     <div class="clear"></div> 
    </li> 


</ul> 

어떤 도움을 크게 감상 할 수있다, 감사합니다

항목이 실제로 페이지에 존재하기 전에 이러한 이벤트를 부착하는 것 같습니다

Answer 1

.

이 경우이 선택의 길이를 확인하여 쉽게 경우 당신은 테스트 할 수 있습니다

$(function(){ 
    $("#menucontainer").load("navigation.html", function() { 
     $("#nav li").hoverIntent({ 
      sensitivity: 7, 
      interval: 10, 
      over: showNav, 
      timeout: 20, 
      out: hideNav 
     }); 
    }); 
}); 

function showNav() { 
    $(this).find("ul").slideDown(500); 
} 

function hideNav() { 
    $(this).find("ul").stop(true, true).slideUp(500); 
}; 

---

당신은 load() 방법에 콜백을 전달할 수 있습니다 :이 시도

$("#nav li").length // probably == 0 

을 로드가 완료되면 실행됩니다.

.load(url, [data], [complete(responseText, textStatus, XMLHttpRequest)])