导入的Bootstrap HTML导航栏响应式下拉菜单无法触发问题

问题根因 #

Bootstrap的交互组件（包括导航栏下拉菜单）的事件绑定，是在Bootstrap JS文件加载完成、页面初始DOM解析完毕后自动执行的。你通过jQuery.load()异步加载的_navbar.html内容，是在Bootstrap初始化完成后才插入到页面DOM中的，因此新插入的下拉菜单按钮没有绑定对应的点击事件，触发响应式布局后点击无反应。

解决方案 #

方案1：在load回调中手动初始化下拉组件（最快捷） #

在导航栏加载完成的回调函数中，手动触发下拉菜单的初始化逻辑即可，代码修改如下：

$(function(){
  $("#headerID").load("partials/_navbar.html", function() {
    // 导航栏加载完成后手动初始化下拉组件
    // 适配Bootstrap 4版本
    $('.dropdown-toggle').dropdown();
    // 若使用Bootstrap 5版本，请替换为以下代码
    // const dropdownList = document.querySelectorAll('.dropdown-toggle')
    // dropdownList.forEach(dom => new bootstrap.Dropdown(dom))
  }); 
  $("#footerID").load("partials/_footer.html"); 
});

方案2：调整公共模块引入方式（从根源避免问题） #

如果项目支持服务端能力或使用前端构建工具，建议不要使用客户端异步加载的方式引入公共头部、底部：

• 服务端项目可直接使用服务端引入能力（如Nginx SSI、PHP include、Node服务端模板拼接），在页面返回给客户端前就把公共部分拼接完成
• 前端工程化项目可使用构建工具的模板导入能力（如Vite/Webpack的模板插件、Gulp gulp-file-include 插件），在构建阶段将公共部分插入到对应位置

两种方式都能保证导航栏DOM和页面主DOM一同加载，Bootstrap初始化时会自动绑定所有交互事件，不会出现动态加载的兼容问题。

注意：你当前使用的jQuery 3.3.1版本完全兼容Bootstrap 4所有版本，若升级到Bootstrap 5无需依赖jQuery，可直接使用原生API初始化组件。

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