Jquery从外部HTML加载菜单，但动画不起作用

Question

我用jquery创建了一个向下滑动的导航。它工作完美，但我想有菜单(无序列表)在一个单独的html文件，所以当改变它实现在我所有的网站页面。

我使用以下代码将html文件加载到div "menucontainer"

$(document).ready(function(){
$( "#menucontainer" ).append(
   $( '<div>' ).load( 'navigation.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

<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

看起来您在项目实际存在于页面之前就附加了这些事件。

你可以很容易地通过检查选择器的长度来测试这种情况:

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

试试这个:

$(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()方法，它将在加载完成后触发。

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