JavaScript加载的header汉堡菜单移动端点击链接后无法关闭如何解决

核心原因 #

你遇到的移动端汉堡菜单点击后无法自动关闭的问题，本质是动态插入的DOM元素没有绑定原有事件导致的：

• 你的菜单关闭逻辑是在页面初始加载时，绑定到当时已存在的导航链接元素上的
• 当你通过$.get动态加载nav.html内容并替换占位元素时，新插入的导航链接是在初始绑定执行后才进入DOM树的，不会触发原有绑定的关闭事件
• 静态写入index.html的菜单没有这个问题，因为初始绑定时元素已经存在

修复方案 #

二选一即可：

方案1：改用事件委托（推荐） #

将原来直接绑定给导航链接的点击事件，改绑定到页面初始就存在的父级元素（如document、body）上，兼容所有后续动态插入的符合选择器的元素。
示例：
假设你原有的关闭菜单代码类似：

// 原有绑定方式，不兼容动态元素
$('.mobile-menu-link').click(function() {
  // 关闭汉堡菜单的原有逻辑
})

修改为事件委托写法：

// 委托到document，兼容所有动态插入的.menu-link元素
$(document).on('click', '.mobile-menu-link', function() {
  // 保留原有的关闭汉堡菜单逻辑即可
})

方案2：动态加载完成后重新初始化菜单 #

在$.get的回调函数中，导航内容插入DOM后，重新执行一遍你的菜单初始化逻辑：

<!-- header begin -->
<div id="nav-placeholder">
    <script>
        $.get("nav.html", function(data) {
            $("#nav-placeholder").replaceWith(data);
            // 新增：调用你的菜单初始化函数，重新给新插入的元素绑定事件
            initNavigation(); 
        });
    </script>
</div>
<!-- header close -->

将initNavigation()替换为你项目中原有的导航菜单初始化方法名即可。

内容的提问来源于stack exchange，提问作者omon