使用html()输出Bootstrap Popover时失效仅显示标题，求解决方案

嘿，这个问题我之前踩过坑！核心原因其实很简单：你是通过html()方法动态插入的popover元素，但Bootstrap的popover插件只会在$(document).ready()阶段初始化当时已经存在于DOM中的元素，后来新增的元素根本没被插件“识别”，所以只会显示默认的title文本，完全触发不了popover的弹窗效果。

给你两个实用的解决办法，按需选择：

办法一：动态插入后立即初始化 #

每次用html()添加完元素后，直接针对新插入的popover元素调用popover()方法完成初始化，代码修改如下：

$("button").click(function() {
  // 动态插入带popover的元素
  $("p").html('<a href="#" title="hello, this is title" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>');
  // 初始化新插入的popover元素
  $("p [data-toggle='popover']").popover();
});

$(document).ready(function(){
  // 初始化页面加载时就存在的popover元素
  $('[data-toggle="popover"]').popover();
});

这个办法简单直接，适合偶尔动态添加元素的场景，每次插入后补一次初始化就好。

办法二：事件委托+自动初始化（适合频繁动态添加的场景） #

如果需要频繁动态插入popover元素，每次手动初始化太麻烦，可以用事件委托的方式，让所有（包括未来新增的）popover元素在触发交互时自动完成初始化，代码示例：

$(document).ready(function(){
  // 初始化页面原有popover元素
  $('[data-toggle="popover"]').popover();
  
  // 监听mouseenter事件，处理动态元素的初始化与显示
  $(document).on('mouseenter', '[data-toggle="popover"]', function() {
    var $target = $(this);
    // 检查是否已初始化，避免重复绑定
    if (!$target.data('bs.popover')) {
      $target.popover();
    }
    // 手动触发popover显示
    $target.popover('show');
  });
  
  // 监听mouseleave事件，隐藏popover
  $(document).on('mouseleave', '[data-toggle="popover"]', function() {
    $(this).popover('hide');
  });
});

$("button").click(function() {
  $("p").html('<a href="#" title="hello, this is title" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>');
});

这个方案的好处是一劳永逸，不管后续新增多少popover元素，都能自动触发效果，不用再手动调用初始化方法。

小提醒 #

• 注意不要重复初始化popover元素，否则可能出现多次弹窗的异常情况；
• 如果使用的是Bootstrap 4/5版本，插件的初始化方式和数据属性（比如data-bs-toggle代替data-toggle）略有调整，但核心逻辑完全一致——动态添加的元素必须重新触发插件初始化。

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