如何用jQuery实现多页复用响应式导航栏并修复toggleButton为空报错

错误根因 #

代码执行顺序不符合预期：script.js加载后会优先执行获取toggleButton、nav-list元素并绑定点击事件的逻辑，但此时jQuery的load方法还未完成外部nav.html文件的加载，对应DOM节点还没有插入到当前页面中，因此获取到的toggleButton为null，绑定事件时就会抛出报错。你直接把nav.html的代码写在index.html中时，元素在页面初始化时就已存在，所以功能可以正常运行。

修复方法 #

修改script.js的代码逻辑，将元素获取和事件绑定的操作放到load方法的回调函数中，确保只有nav.html加载完成、DOM节点插入页面后，再执行相关操作，修改后代码如下：

$(function(){                                                         
  // 导航加载完成后再执行元素获取和事件绑定
  $("#nav-placeholder").load("nav.html", function() {
    const toggleButton = document.getElementById('toggleButton');
    const navList = document.getElementById('nav-list');
    toggleButton.addEventListener('click', () => {
        navList.classList.toggle('active');
    });
  });
  $("#footer-placeholder").load("footer.html");
});

可选优化方案 #

如果需要更通用的动态元素事件绑定逻辑，也可以使用事件委托的方式，将点击事件绑定到页面初始化时就存在的父级元素上，无需依赖load回调：

$(function(){                                                         
  $("#nav-placeholder").load("nav.html");
  $("#footer-placeholder").load("footer.html");
  // 事件委托绑定点击事件
  $(document).on('click', '#toggleButton', function() {
    $('#nav-list').toggleClass('active');
  });
});

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