Rails 8应用中点击内部链接后Bootstrap组件失效，疑似与Turbo存在冲突

兄弟，这个Turbo和Bootstrap的冲突我太熟了！Rails 8默认启用Turbo后，这种组件失效的情况真的很常见，我之前踩过一模一样的坑。本质原因是Turbo的页面局部替换机制会保留旧的DOM元素和Bootstrap组件实例，新加载的DOM没法和Bootstrap的事件系统正确绑定，还会留下像模态框背景层这样的残留元素，导致各种奇怪的bug。

问题拆解 #

你遇到的几个症状都是典型的Turbo-Bootstrap冲突：

• 下拉菜单打不开：旧的Dropdown实例没销毁，新DOM的下拉按钮没绑定新实例
• 汉堡菜单关不上：Navbar的Collapse组件没有重新初始化，状态混乱
• 模态框背景变黑：每次Turbo加载页面都新增一个modal-backdrop元素，叠加后越来越暗

亲测有效的解决方案 #

我之前用这套方法解决了所有类似问题，你可以直接照搬：

1. 先清理旧实例和残留元素（关键步骤）

在Turbo开始渲染新页面之前，先销毁所有已初始化的Bootstrap组件，同时清理残留的模态框背景层，避免冲突：

// app/javascript/application.js
document.addEventListener("turbo:before-render", () => {
  // 销毁所有Dropdown实例
  document.querySelectorAll(".dropdown-toggle").forEach(el => {
    const dropdownInstance = window.bootstrap.Dropdown.getInstance(el);
    if (dropdownInstance) {
      dropdownInstance.dispose();
      delete el.dataset.bsDropdownInitialized;
    }
  });

  // 销毁Navbar的Collapse实例（解决汉堡菜单关不上的问题）
  document.querySelectorAll(".navbar-collapse").forEach(el => {
    const collapseInstance = window.bootstrap.Collapse.getInstance(el);
    if (collapseInstance) {
      collapseInstance.dispose();
    }
  });

  // 清理所有残留的模态框背景层（解决背景变黑的问题）
  document.querySelectorAll(".modal-backdrop").forEach(backdrop => backdrop.remove());
});

2. 重新初始化Bootstrap组件

等Turbo渲染完新页面后，给新DOM元素重新绑定Bootstrap组件：

document.addEventListener("turbo:render", () => {
  // 初始化所有下拉菜单
  document.querySelectorAll(".dropdown-toggle").forEach(el => {
    if (!window.bootstrap.Dropdown.getInstance(el)) {
      new window.bootstrap.Dropdown(el);
      el.dataset.bsDropdownInitialized = "true";
    }
  });

  // 初始化Navbar折叠组件（注意加toggle:false避免初始状态异常）
  document.querySelectorAll(".navbar-collapse").forEach(el => {
    if (!window.bootstrap.Collapse.getInstance(el)) {
      new window.bootstrap.Collapse(el, { toggle: false });
    }
  });
});

为什么你的之前代码没用？ #

你之前只处理了Dropdown组件，没管Navbar的Collapse和模态框的背景层，而且没有销毁旧的组件实例——Bootstrap的组件如果已经初始化过，直接新建实例会导致事件绑定混乱，所以必须先销毁再重新初始化。

额外小提示 #

如果还是有问题，可以试试禁用Turbo的页面缓存（不推荐，但应急可用）：
在application.html.erb的<head>里加一行：

<meta name="turbo-cache-control" content="no-cache">

内容来源于stack exchange