JS加载导航栏后，下拉菜单Hover激活功能失效如何解决？

嘿，这个问题我之前踩过一模一样的坑！核心原因很简单：你写的hover事件绑定代码，是在页面初始加载时就执行了，但这时候nav.html里的.top-nav-item元素还没被加载到DOM里呢，相当于你给一个不存在的元素绑定事件，自然就没效果啦。

给你两个靠谱的解决方案，任选其一就行：

方案一：在load的回调函数里绑定hover事件 #

jQuery的load()方法支持传入一个回调函数，这个函数会在导航栏完全加载并插入到页面之后才执行，这时候再绑定hover事件，就能精准命中目标元素了。

修改后的代码示例：

$(document).ready(function(){
  // 加载导航栏，加载完成后执行回调
  $("#nav").load("nav.html", function() {
    // 现在导航元素已经存在于DOM中，正常绑定hover
    $(".top-nav-item").hover(
      function() {
        // 显示下拉菜单，用stop()防止动画叠加
        $('.dropdown-menu', this).stop().slideDown();
      },
      function() {
        // 隐藏下拉菜单
        $('.dropdown-menu', this).stop().slideUp();
      }
    );
  });
});

方案二：使用事件委托（Event Delegation） #

如果不想依赖load的回调，还可以用事件委托的方式——把事件绑定到一个一开始就存在的父元素（比如#nav或者document）上，利用事件冒泡的特性，监听后来动态加载的子元素的事件。

代码示例：

$(document).ready(function(){
  $("#nav").load("nav.html");
  
  // 事件委托：绑定到#nav，监听子元素的mouseenter/mouseleave
  $("#nav").on("mouseenter", ".top-nav-item", function() {
    $('.dropdown-menu', this).stop().slideDown();
  }).on("mouseleave", ".top-nav-item", function() {
    $('.dropdown-menu', this).stop().slideUp();
  });
});

这里用mouseenter和mouseleave代替hover，因为hover是这两个事件的快捷语法，在事件委托里直接用原生事件更稳妥。

小提示 #

记得加上stop()方法，这样当用户快速切换hover状态时，不会出现下拉菜单动画叠加、抖动的问题，体验会更流畅。

内容的提问来源于stack exchange，提问作者D. Basson