Bootstrap 5环境下jQuery的button方法对AJAX动态添加按钮失效如何解决

• 初始加载时执行的$("button").button()仅会对执行时刻已经存在于DOM中的按钮完成jQuery UI主题初始化，AJAX动态插入的按钮是在该代码执行后才加入DOM的，没有经过初始化，因此样式失效。
• 额外注意：Bootstrap 5自带的button JS组件与jQuery UI的button()方法存在命名空间冲突，也可能导致部分场景下初始化逻辑异常。

方案1：AJAX请求完成后手动初始化（优先推荐） #

每次AJAX请求渲染完新的按钮DOM后，单独对新插入的元素执行初始化，无额外性能开销，逻辑可控：

// 示例AJAX请求逻辑
$.ajax({
  url: "你的接口地址",
  type: "GET",
  success: function(response) {
    // 先将返回的HTML内容插入到指定页面容器
    $("#content-container").html(response);
    // 仅对容器内新插入的按钮执行jQuery UI主题初始化
    $("#content-container").find("button").button();
  }
});

方案2：DOM变化自动监听初始化 #

如果项目中AJAX请求较多，不想逐个修改请求逻辑，可以使用MutationObserver监听指定区域的DOM变化，自动初始化新插入的按钮：

// 监听动态内容插入的父容器，此处以监听整个body为例，也可指定具体的内容容器减少性能消耗
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.addedNodes.length) {
      // 过滤已初始化过的按钮，避免重复执行
      $(mutation.addedNodes).find("button:not(.ui-button)").button();
    }
  });
});
// 启动监听，配置为监听子节点增减及后代节点变化
observer.observe(document.body, {
  childList: true,
  subtree: true
});

方案3：解决Bootstrap与jQuery UI命名冲突 #

如果排查发现是命名冲突导致初始化失效，可以通过重命名jQuery UI button方法解决：

// 在jQuery UI加载完成后、Bootstrap加载前执行，将jQuery UI的button方法重命名为uiButton
$.widget.bridge('uiButton', $.ui.button);

// 后续所有按钮初始化改用重命名后的方法即可
// 静态按钮初始化
$("button").uiButton();
// 动态按钮初始化
$("#content-container").find("button").uiButton();

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