如何选择jQuery load方法加载的外部导航栏内的DOM元素？

问题根因 #

jQuery.load()为异步执行方法，触发导航栏文件加载请求后，不会等待资源返回并插入DOM，就会继续执行后续app.js内的逻辑。此时导航栏对应的.burger、.nav-links等元素还未挂载到页面上，querySelector返回null，调用相关属性、方法就会抛出空引用错误。

修复步骤 #

1. 修改index.html中load方法的调用逻辑，传入回调函数，保证导航栏内容加载完成后再执行交互初始化：

<script>
$(function(){
  // 第二个参数为加载完成后的回调函数
  $("#nav-placeholder").load("nav.html", function() {
    app();
  });
});
</script>

2. 移除app.js末尾直接执行的app()调用，避免提前执行触发异常。

可选兼容方案 #

如果后续有多处逻辑都依赖加载完成的导航栏元素，也可以自定义事件监听，加载完成后触发自定义事件，各处逻辑监听对应事件执行即可。

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