Bootstrap confirmation在onClick点击事件中无法正常生效是什么原因？

• 初始化时机错误：你将Confirmation组件的初始化逻辑放在了按钮的点击回调中，第一次点击按钮时才会触发组件初始化，此时组件刚完成绑定，无法响应本次点击事件弹出确认框；且每次点击都会重复执行初始化逻辑，会导致组件状态混乱无法正常工作。
• 事件冲突：Confirmation组件本身就是依靠监听点击事件触发弹窗的，将初始化逻辑放在同按钮的点击事件中，会出现事件触发顺序冲突，干扰组件本身的事件逻辑。

方案1：页面加载完成后全局初始化（推荐） #

不需要将初始化放在点击事件中，DOM加载完成后直接初始化即可，代码如下：

$(function() {
  $('[data-toggle=confirmation]').confirmation({
    rootSelector: '[data-toggle=confirmation]'
  });
})

方案2：必须在点击时才初始化的特殊场景 #

如果有动态渲染、前置校验等特殊需求，必须点击时才初始化，需要增加初始化状态判断，且初始化完成后手动触发弹窗显示：

$('.myButton').on("click", function(e) {
  const $btn = $(this);
  // 校验是否已经初始化，避免重复初始化
  if (!$btn.data('bs.confirmation')) {
    $btn.confirmation({
      rootSelector: '[data-toggle=confirmation]'
    });
    // 手动触发确认框显示
    $btn.confirmation('show');
    // 阻止本次事件冒泡和默认行为，避免冲突
    e.stopImmediatePropagation();
    e.preventDefault();
  }
});

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