使用jQuery加载网站公共头部时hover不显示子导航菜单问题咨询

• 子菜单hover交互的事件绑定逻辑位于assets/js/main.js中，该脚本在页面初始加载时就会执行，此时动态加载的header.html内容还未插入到页面DOM中，因此导航栏的.submenu等元素没有被绑定上对应的hover事件，触发不了子菜单显示逻辑。
• 你当前的代码执行顺序是先运行main.js的初始化逻辑，再加载头部内容，导致新增的DOM元素没有匹配到已有的事件监听规则。

你可以选择以下任意一种方案修改，改造成本都很低：

方案1：在头部加载完成后重新初始化导航事件 #

修改你当前的加载代码，给load方法增加回调函数，等头部内容插入页面后再执行导航的初始化逻辑：

<script src="assets/js/main.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
    $("#header").load("header.html", function() {
        // 此处填入原main.js中导航子菜单的初始化代码即可
        // 如果你不清楚原初始化代码的具体内容，可以直接将main.js中所有和#nav、.submenu相关的代码复制到该回调函数内
    });
});
</script>

方案2：修改原事件绑定为事件委托模式 #

如果不想调整加载逻辑，可以直接修改main.js中的子菜单事件绑定代码，将绑定目标改为永久存在的顶层DOM（例如document），通过事件委托匹配所有后续新增的.submenu元素：

// 假设原绑定代码类似这样
$('.submenu').hover(function() {
  // 显示子菜单逻辑
}, function() {
  // 隐藏子菜单逻辑
})

// 修改为事件委托形式后
$(document).on('mouseenter', '.submenu', function() {
  // 保留原来的显示子菜单逻辑
}).on('mouseleave', '.submenu', function() {
  // 保留原来的隐藏子菜单逻辑
})

修改后不管什么时候插入的导航元素，都能正常触发hover事件。

内容的提问来源于stack exchange，提问作者Rachel Buigas-Lopez