Bootstrap 5模态框关闭重开后Popover焦点触发失效问题

问题现象 #

• 首次打开模态框：按钮Popover可通过hover/focus触发，点击按钮后Popover保持打开，能正常操作内部的「Continue」按钮。
• 关闭重开模态框后：仅hover触发有效，focus失效；点击按钮能触发监听事件，但Popover无法保持打开状态。
• Chrome、Safari均出现此问题，Safari控制台抛出TypeError，排查发现模态框隐藏再显示后，Popover绑定的内容DOM元素$('[data-name="close-btn-popover-content"]')已被销毁，手动重新添加也无法解决。
• 测试代码运行时，关闭重开会报错，且「Continue」按钮的事件监听丢失。

问题本质 #

Bootstrap模态框隐藏时会销毁或移除内部DOM元素，导致首次初始化的Popover实例绑定的DOM已失效；重新打开模态框时，未重新创建有效Popover实例，同时事件监听未重新绑定，引发一系列异常。

修复方案 #

方案一：模态框显隐时动态销毁/重建Popover #

利用模态框的shown.bs.modal和hidden.bs.modal事件，每次显示时初始化Popover，隐藏时销毁实例，避免无效实例干扰：

// 监听模态框显示事件，初始化Popover
$('#modalId').on('shown.bs.modal', function () {
  // 初始化Popover，指定动态内容和触发方式
  $('#popoverTriggerBtn').popover({
    trigger: 'hover focus click',
    content: () => $('[data-name="close-btn-popover-content"]').html(),
    html: true,
    placement: 'bottom'
  });

  // 重新绑定Continue按钮事件（避免事件丢失）
  $('#continueBtn').off('click').on('click', function () {
    $('#popoverTriggerBtn').popover('hide');
    $('#modalId').modal('hide');
    // 这里添加你的业务逻辑
  });
});

// 监听模态框隐藏事件，销毁Popover实例
$('#modalId').on('hidden.bs.modal', function () {
  $('#popoverTriggerBtn').popover('dispose');
});

方案二：使用静态模板作为Popover内容 #

不依赖模态框内的DOM元素，直接用字符串模板定义Popover内容，避免DOM销毁导致的绑定失效：

// 定义Popover内容模板
const popoverTemplate = `
  <div class="p-2">
    <p>确认执行此操作？</p>
    <button id="continueBtn" class="btn btn-sm btn-primary">Continue</button>
  </div>
`;

$('#modalId').on('shown.bs.modal', function () {
  $('#popoverTriggerBtn').popover({
    trigger: 'hover focus click',
    content: popoverTemplate,
    html: true,
    placement: 'bottom'
  });

  // 通过事件委托绑定按钮事件（适配动态生成的内容）
  $('body').off('click', '#continueBtn').on('click', '#continueBtn', function () {
    $('#popoverTriggerBtn').popover('hide');
    $('#modalId').modal('hide');
    // 业务逻辑代码
  });
});

$('#modalId').on('hidden.bs.modal', function () {
  $('#popoverTriggerBtn').popover('dispose');
});

核心注意点 #

• 必须在模态框完全显示后初始化Popover，确保目标DOM已加载完成。
• 每次模态框隐藏时务必销毁Popover实例，防止内存泄漏和无效实例残留。
• 动态生成的按钮事件需用事件委托或重新绑定，避免事件丢失。

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