如何使用jQuery调用Bootstrap 5.2 Popper组件的setContent方法

核心思路 #

Bootstrap 5保留了jQuery兼容模式，但对于setContent这类需要传入复杂参数的方法，无法直接通过$('#element').popover('setContent', ...)的快捷方式调用，必须先获取原生Bootstrap Popover实例，再调用实例方法。

步骤与示例 #

1. HTML结构示例

<!-- 触发Popover的元素 -->
<button id="myPopover" type="button" class="btn btn-primary" 
        data-bs-toggle="popover" title="初始标题" data-bs-content="初始内容">
  弹出Popover
</button>

<!-- 用于更新内容的按钮 -->
<button id="updatePopover" class="btn btn-secondary">更新Popover内容</button>

2. jQuery调用代码

// 初始化Popover（可选，data-bs-toggle属性会自动完成初始化）
$('#myPopover').popover();

// 绑定更新按钮的点击事件
$('#updatePopover').on('click', function() {
  // 将jQuery对象转为原生DOM元素，再获取Popover实例
  const popoverInstance = bootstrap.Popover.getOrCreateInstance($('#myPopover')[0]);
  
  // 调用setContent方法更新标题与内容
  popoverInstance.setContent({
    '.popover-header': '更新后的标题',
    '.popover-body': '这是更新后的Popover主体内容'
  });
  
  // 可选：立即显示更新后的Popover
  popoverInstance.show();
});

关键说明 #

• 实例获取方式：
  • bootstrap.Popover.getOrCreateInstance()：若元素未初始化Popover，会自动创建实例；已初始化则直接返回现有实例，适合不确定初始化状态的场景。
  • bootstrap.Popover.getInstance()：仅返回已初始化的实例，适合明确已完成初始化的场景。
• 文档笔误纠正：官方示例中声明变量为popover却用myPopover调用，属于笔误，实际使用时需保持变量名一致。
• 参数规则：setContent的参数为键值对，键是Popover内部元素的选择器（.popover-header对应标题，.popover-body对应内容），值为要更新的文本内容。

内容的提问来源于stack exchange，提问作者AK1828 Tech Enthusiast