Bootstrap Table按钮点击多次触发Bootbox弹窗问题求解

核心原因说明 #

多次弹窗本质是同一个点击事件被重复绑定了多次，你之前off()解绑未生效大概率是解绑的作用域、事件匹配规则不对导致的，可按以下步骤逐一排查修复： #

1. 给点击事件加专属命名空间，确保解绑精准 #

调用.off()时如果没有指定明确的匹配规则，很容易出现解绑不彻底的情况，修改绑定逻辑如下：

// Global.js的operativeEvents函数内修改事件绑定逻辑
$('.tableButton').off('click.tableBtnEvent').on('click.tableBtnEvent', function() {
  // 原有逻辑：获取行数据、赋值给window.currentRow、调用buttonActions
})

给click事件加.tableBtnEvent专属命名空间后，解绑时只会移除同命名空间的事件，不会受其他绑定的同类型事件干扰。 #

2. 确认onPostBody的触发频次 #

Bootstrap Table的onPostBody事件不止初始化渲染时会触发，分页切换、搜索筛选、排序、刷新表格等所有触发表格主体重绘的操作都会触发该事件，如果没有做重复绑定拦截，每重绘一次表格就会多绑一次事件：

• 可以在operativeEvents函数开头加日志，确认是否是该函数多次触发导致的重复绑定
• 可选优化：把事件绑定从onPostBody移到表格初始化的onLoadSuccess事件中，仅在表格数据加载完成后绑定一次，避免分页/筛选等操作反复触发绑定

3. 排查bookMatch方法内部的重复绑定逻辑 #

如果上述方法无效，检查bookMatch方法内部有没有重复给Bootbox确认按钮绑定事件的逻辑：

// 正确示例：直接用bootbox自带回调，不要额外给弹窗按钮绑定事件
function bookMatch() {
  bootbox.confirm('确认预约？', function(result) {
    if(result) {
      // 预约逻辑
    }
  })
}

如果你的bookMatch里是手动给Bootbox生成的按钮加点击事件，需要在绑定前先解绑，或者直接用bootbox自带的回调参数，不要额外绑定。 #

4. 改用事件委托方式绑定，彻底避免重复绑定 #

最优解是不要每次表格重绘都重新绑定按钮事件，直接在页面初始化的时候给父级元素做事件委托，只需要绑定一次即可：

// 直接在Global.js页面加载完成后绑定一次，不需要放到onPostBody里
$(document).off('click.tableBtnEvent').on('click.tableBtnEvent', '.tableButton', function() {
  // 原有逻辑：获取当前行数据，赋值window.currentRow，调用buttonActions
})

这种方式不需要随表格重绘反复绑定，不管表格刷新多少次，事件只会触发一次，从根源避免重复绑定问题。

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