如何通过JavaScript为Popover添加自定义按钮内容

嘿，我看你是想给Bootstrap Popover加自定义按钮内容但没成功对吧？问题大概率出在重复初始化Popover实例上，我来给你一步步解决~

你现在的代码里先全局初始化了所有带data-toggle="popover"的元素，之后又单独给#bedsButton重新初始化配置，这会导致Bootstrap的Popover实例冲突，自定义的按钮内容自然就不会生效了。给你两个靠谱的解决方案：

方案一：移除全局初始化，单独配置目标按钮 #

如果这个页面里只有#bedsButton需要自定义Popover内容，直接去掉全局初始化的代码，只单独配置它就好，这样最简洁：

HTML部分 #

<div class="col-1">
  <a id="bedsButton" title="Number of Bedrooms">Beds</a>
</div>

JavaScript部分 #

// 直接初始化目标按钮的Popover，明确所有必要配置
$('#bedsButton').popover({
  content: `<button value="0" class="">0</button>`,
  trigger: 'click',
  html: true, // 必须开启这个，否则HTML内容会被转成纯文本
  placement: 'bottom',
  title: 'Number of Bedrooms'
});

方案二：兼容多Popover场景，先销毁再重新配置 #

如果页面上有多个Popover需要全局初始化，同时要给#bedsButton单独改配置，那可以先销毁它的全局实例，再重新初始化：

// 先全局初始化所有Popover
$('[data-toggle="popover"]').popover();

// 销毁#bedsButton的原有实例，再重新配置自定义内容
$('#bedsButton')
  .popover('dispose')
  .popover({
    content: `<button value="0" class="">0</button>`,
    trigger: 'click',
    html: true
  });

适配PHP动态生成按钮的小技巧 #

你说之后要用PHP生成这些按钮，给你个实用的写法：可以在PHP里把按钮的HTML输出到元素的data-content属性里，然后JS读取这个属性，这样更灵活也不容易出错：

HTML（混合PHP） #

<div class="col-1">
  <a id="bedsButton" data-content="<?php echo htmlspecialchars('<button value="0" class="">0</button>'); ?>">Beds</a>
</div>

JavaScript部分 #

$('#bedsButton').popover({
  content: function() {
    // 读取元素上预生成的HTML内容
    return $(this).data('content');
  },
  trigger: 'click',
  html: true,
  placement: 'bottom',
  title: 'Number of Bedrooms'
});

最后再提醒你两个容易踩的坑：

• 一定要确保开启html: true，不然你的按钮代码会被当成纯文本显示出来
• 不要重复初始化同一个元素的Popover实例，这是最常见的失效原因

备注：内容来源于stack exchange，提问作者Daniel el khal