Bootstrap中禁用popover内容内按钮监听器解决多表单提交冲突

你的判断方向是对的，冲突根源完全来自$(document).on(...)的全局事件绑定逻辑：

• 两次调用handlePopover时，函数内部重复给document绑定了两次针对#submit、#close的点击委托。全局委托的触发规则只匹配被点击元素的选择器，和对应popover是否处于显示状态没有任何关联
• 只要DOM中匹配#submit的元素被点击，所有挂在document上、匹配该选择器的回调都会依次执行——哪怕其中一个popover已经隐藏，它之前绑定的回调逻辑依然会被触发
• 原代码附带的笔误：传进来的button变量被写成了拼写错误的botton，执行关闭逻辑时会直接报错

另外不推荐你考虑“popover隐藏时手动禁用事件监听器”的方案：频繁绑定/解绑事件不仅性能损耗高，还容易出现解绑不彻底导致的内存泄漏，后续扩展多按钮场景时维护成本极高。

方案1：全局委托只绑定一次，通过可见popover判断当前操作对象 #

把重复的全局绑定从按钮初始化函数里抽出来，只在页面加载时绑一次，点击时先定位当前处于可见状态的popover，再匹配对应按钮的业务逻辑：

// 全局事件只绑定一次，带独立命名空间避免重复绑定
$(document)
  .off('click.popoverAction', '#submit')
  .on('click.popoverAction', '#submit', function() {
    // 定位当前屏幕上可见的popover对应的触发按钮
    const visibleTrigger = $('.popover:visible').prev('.popover-trigger-btn');
    const triggerId = visibleTrigger.attr('id');

    // 按触发按钮的id执行对应业务
    if (triggerId === 'button1') {
      alert("button1的提交逻辑");
      // 此处补button1对应的表单数据收集、提交逻辑
    } else if (triggerId === 'button2') {
      alert("button2的提交逻辑");
      // 此处补button2对应的表单数据收集、提交逻辑
    }
  })
  .off('click.popoverAction', '#close')
  .on('click.popoverAction', '#close', function() {
    // 关闭当前可见的popover
    $('.popover:visible').prev('.popover-trigger-btn').popover('hide');
  });

// 按钮初始化函数，只做popover初始化，不再重复绑定全局事件
function handlePopover(button) {
  // 给所有popover触发按钮加统一类，方便后续查找
  button.addClass('popover-trigger-btn');
  // 正常初始化popover组件即可
  button.popover({
    html: true,
    content: $('#sharedPopoverTemplate').html()
  });
}

方案2：缩小事件绑定的作用域，避免全局匹配 #

如果你想保留原有基于id判断业务的写法，只需要给每个popover的内容区设置唯一标识，把全局选择器替换成对应popover范围内的局部选择器，就能避免不同popover的事件互相干扰：

• 两个按钮初始化popover时，分别给popover的根节点设置唯一id，比如对应button1的popover根id为popover-1，对应button2的为popover-2
• 绑定事件时，把原来全局匹配的#submit、#close，替换成#popover-1 #submit、#popover-1 #close这类局部作用域的选择器，不同popover内的同id元素就不会触发跨范围的回调了

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