Bootstrap按钮绑定popover后首次点击不生效需点击两次如何解决

• 你当前的逻辑是首次点击按钮时才动态添加popover的配置属性、执行popover初始化，Bootstrap的popover初始化完成后，第一次点击的事件已经被消耗，不会触发显示，因此需要第二次点击才能正常弹出。
• 你把初始化逻辑包裹在$(function(){})（DOM就绪回调）中，进一步延迟了初始化执行时机，放大了该问题。

方案1：点击初始化后手动触发弹出（适配动态传参场景） #

直接移除DOM就绪回调包裹，初始化完成后手动调用popover('show')触发首次弹出，同时增加初始化标记避免重复执行逻辑，修改后的代码如下：

function PopOver(myObj, mgr, Adate, Vdate) {
    // 已初始化过直接返回，避免重复执行
    if ($(myObj).data('popover-inited')) return
    // 配置popover属性
    myObj.setAttribute("data-container", "body")
    myObj.setAttribute("data-toggle", "popover")
    myObj.setAttribute("data-placement", "bottom")
    myObj.setAttribute("data-html", "true")
    myObj.setAttribute("data-trigger", "focus")
    myObj.setAttribute("title", "otherInfo")
    myObj.setAttribute('data-content', `MGR：${mgr}<br />DATE1：${Adate}<br />DATE2：${Vdate}`)
    // 仅针对当前元素初始化popover，避免全局遍历影响性能
    $(myObj).popover()
    // 手动触发首次弹出
    $(myObj).popover('show')
    // 标记已初始化
    $(myObj).data('popover-inited', true)
}

方案2：提前统一初始化（适配静态按钮场景） #

如果按钮的参数不需要动态生成，可以直接把所有popover配置属性写在HTML标签内，页面加载完成后统一初始化所有popover，无需绑定点击事件：

<button type="button" class="btn btn-warning" 
  data-container="body"
  data-toggle="popover"
  data-placement="bottom"
  data-html="true"
  data-trigger="focus"
  title="otherInfo"
  data-content="MGR：Hi<br />DATE1：Thank<br />DATE2：You">
ClickMe！
</button>

页面加载完成后执行初始化逻辑即可：

$(function(){
  $("[data-toggle='popover']").popover()
})

内容的提问来源于stack exchange，提问作者亞鯉斯多德