Rails 7问题：点击提交按钮后Bootstrap Popover失效

问题原因 #

问题核心在于Hotwire Turbo的页面更新机制：
你当前的Popover初始化代码仅在页面首次加载时执行一次。当表单提交后，Turbo会通过AJAX异步替换页面的DOM内容（包括生成popover的按钮），新生成的DOM元素没有被重新绑定Popover实例，导致点击失效。只有刷新页面时，初始化代码才会重新执行，Popover才恢复正常。

解决方法 #

方法一：监听Turbo事件，全局重新初始化组件 #

修改app/javascript/application.js，将初始化逻辑封装成函数，并监听Turbo的页面加载/渲染事件，确保每次DOM更新后都重新初始化Popover和Tooltip：

import "@hotwired/turbo-rails"
import "./controllers"
import * as bootstrap from "bootstrap"

function initBootstrapComponents() {
  // 初始化Popover，先销毁旧实例避免重复绑定
  const popoverTriggers = Array.from(document.querySelectorAll('[data-bs-toggle="popover"]'))
  popoverTriggers.forEach(trigger => {
    const existingPopover = bootstrap.Popover.getInstance(trigger)
    if (existingPopover) existingPopover.dispose()
    new bootstrap.Popover(trigger)
  })

  // 初始化Tooltip，同理销毁旧实例
  const tooltipTriggers = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  tooltipTriggers.forEach(trigger => {
    const existingTooltip = bootstrap.Tooltip.getInstance(trigger)
    if (existingTooltip) existingTooltip.dispose()
    new bootstrap.Tooltip(trigger)
  })
}

// 页面首次加载、Turbo渲染完成后执行初始化
document.addEventListener('turbo:load', initBootstrapComponents)
document.addEventListener('turbo:render', initBootstrapComponents)

方法二：使用Stimulus控制器（Rails 7最佳实践） #

Stimulus是Rails 7默认集成的前端控制器，能自动处理DOM元素的连接/断开，完美适配Turbo的动态DOM更新：

1. 生成Stimulus控制器：

bin/rails generate stimulus bootstrap/popover

2. 修改生成的控制器文件app/javascript/controllers/bootstrap/popover_controller.js：

import { Controller } from "@hotwired/stimulus"
import * as bootstrap from "bootstrap"

export default class extends Controller {
  connect() {
    // 初始化Popover，从data属性读取配置
    this.popover = new bootstrap.Popover(this.element, {
      html: this.data.get("html") === "true",
      content: this.data.get("content")
    })
  }

  disconnect() {
    // 元素从DOM移除时销毁Popover，避免内存泄漏
    this.popover.dispose()
  }
}

3. 更新helper中的按钮，替换原有的Bootstrap data属性为Stimulus控制器属性：

module TestHelper
  def generate_popover
    button_tag("click me to popover message",
       data: { 
         controller: "bootstrap--popover",
         bootstrap--popover_html_value: true,
         bootstrap--popover_content_value: "Popover Msg" 
       })
  end
end

这种方式更模块化，每个Popover元素会在被添加到DOM时自动初始化，移除时自动销毁，无需全局监听事件，更符合Rails 7的生态设计。

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