使用jQuery load()后按钮失效、Bootstrap组件无法正常运行如何解决

Bootstrap 自带的交互组件（dropdown、modal、tooltip 等）的事件绑定和初始化逻辑，是在页面首次加载时自动执行的，只会作用于当时已经存在的 DOM 元素。你调用 load() 方法替换页面 DOM 后，新插入的对应组件 DOM 元素没有经过 Bootstrap 的初始化流程，自然无法触发自带交互，这不是常规事件委托能覆盖的场景。

你可以根据项目实际场景选择以下任意一种方案处理：

• 方案1：在 load() 的回调函数中手动重新初始化对应 Bootstrap 组件
  这是最通用、兼容性最好的方案，load() 方法支持传入回调函数，会在新内容加载插入到 DOM 后执行，你只需要在回调里调用对应 Bootstrap 组件的初始化方法即可，示例代码如下：

$("body").on("click", "#btn", function(event) {
  $("body").load(window.location.href, function() {
    // 重新初始化所有下拉菜单
    $('.dropdown').dropdown();
    // 重新初始化所有模态框
    $('.modal').modal();
    // 用到其他组件就加对应的初始化方法，例如下方的工具提示
    $('[data-bs-toggle="tooltip"]').tooltip();
    alert("page loaded.");
  });
});

注意如果你用的是 Bootstrap 3/4 版本，部分初始化方法的调用方式和属性名可能略有差异，和你项目当前 Bootstrap 版本的官方用法保持一致即可。

• 方案2：调整load的加载范围，避免覆盖已经初始化过的Bootstrap组件容器
  如果不是必须替换整个body的内容，尽量把 load() 的作用范围缩小到你需要更新的业务内容区域，不要包含导航栏、全局弹窗这类已经初始化过Bootstrap组件的区域，从根源上避免组件被销毁重建的问题。
• 方案3：使用Bootstrap自带的委托式初始化配置（仅部分高版本支持）
  部分高版本Bootstrap的组件支持全局委托配置，你可以在页面首次加载时就设置全局的初始化委托，自动识别后续新增的组件元素，以dropdown为例：

// 全局配置，自动对所有新增的下拉菜单触发元素初始化组件
$(document).on('click.bs.dropdown.data-api', '[data-bs-toggle="dropdown"]', function (e) {
  e.preventDefault()
  $(this).dropdown('toggle')
})

这个方案适合组件使用量很大、不方便每个load回调都写初始化逻辑的场景，要注意对应版本的Bootstrap是否支持对应的事件API。

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