使用jQuery加载跨页面导航栏后对应JS交互功能失效如何解决

根本原因 #

你当前的main.js会在页面初始加载时直接执行，而导航栏DOM是通过$.get异步请求加载后才插入到页面中的，执行getElementById、querySelectorAll查询导航元素时，对应元素还不存在，因此事件绑定、初始化逻辑全部无法生效。

修复方案 #

方案一：封装初始化函数（最推荐） #

先改造main.js，将所有导航相关逻辑封装为可重复调用的全局函数，避免页面加载时直接执行：

// 改造后的main.js代码
window.initNav = () => {
  const showNavbar = (toggleId, navId, bodyId, headerId) => {
    const toggle = document.getElementById(toggleId),
    nav = document.getElementById(navId),
    bodypd = document.getElementById(bodyId),
    headerpd = document.getElementById(headerId)

    if (toggle && nav && bodypd && headerpd) {
      toggle.addEventListener('click', () => {
        nav.classList.toggle('show')
        toggle.classList.toggle('bx-x')
        bodypd.classList.toggle('body-pd')
        headerpd.classList.toggle('body-pd')
      })
    }
  }

  showNavbar('header-toggle', 'nav-bar', 'body-pd', 'header')

  /* 导航链接激活状态逻辑 */
  const linkColor = document.querySelectorAll('.nav__link')
  function colorLink() {
    if (linkColor) {
      linkColor.forEach(l => l.classList.remove('active'))
      this.classList.add('active')
    }
  }
  linkColor.forEach(l => l.addEventListener('click', colorLink))
}

再修改导航栏引入代码，在异步加载完成、DOM插入后调用初始化函数：

<script>
$.get("nav.html", function(data) {
  $("#nav-placeholder").replaceWith(data);
  // 导航DOM插入完成后执行初始化
  initNav();
});
</script>

方案二：动态加载main.js #

如果不想改造现有main.js的结构，可以在导航栏插入完成后再动态加载js文件，注意加标记避免重复加载：

<script>
let mainJsLoaded = false;
$.get("nav.html", function(data) {
  $("#nav-placeholder").replaceWith(data);
  if(!mainJsLoaded) {
    const script = document.createElement('script');
    script.src = 'main.js';
    document.body.appendChild(script);
    mainJsLoaded = true;
  }
});
</script>

注意事项 #

如果存在多页面切换重复加载导航栏的场景，推荐使用方案一，每次插入导航DOM后调用initNav()即可，不会出现重复绑定事件的问题。

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