Bootstrap 5 Popover在响应式JS DataTable中无法正常工作的问题

问题原因 #

当DataTables开启响应式模式后，屏幕缩小时被折叠的列内容会被动态转移到表格的**详情行（child row）**里，这部分是全新生成的DOM元素。而你的Popover只在页面加载时初始化了一次，没有对这些动态生成的元素绑定事件，所以点击折叠后的内容不会触发Popover。

解决方案 #

监听DataTables的responsive-display事件，每次详情行展开时，重新初始化其中元素的Popover。

代码示例 #

$(function() {
  // 初始化页面加载时存在的元素的Popover
  initPopovers();

  // 监听DataTables响应式详情行的显示/隐藏事件
  $('#player-table').on('responsive-display', function(e, datatable, row, showHide) {
    // 仅在详情行展开时重新初始化Popover
    if (showHide) {
      initPopovers();
    }
  });
});

// 封装Popover初始化逻辑，方便复用
function initPopovers() {
  // 先销毁已存在的Popover，避免重复绑定导致异常
  $('[data-bs-toggle="popover"]').popover('dispose');
  
  // 重新初始化所有带popover标记的元素
  $('[data-bs-toggle="popover"]').popover({
    trigger: 'click',
    html: true,
    placement: 'top',
    // 你的其他Popover配置
  });
}

额外说明 #

• 确保你的折叠列元素保留了data-bs-toggle="popover"属性，这样选择器能匹配到详情行内的元素。
• 调用popover('dispose')是为了避免多次初始化导致的事件冲突，确保每次详情行展开时都是全新的Popover实例。

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