使用bootstrap-table分页/搜索时按钮点击事件无法触发的解决方法

这个问题我碰到过好多次啦！核心原因其实很简单：你页面初始化时绑定的点击事件，只对当时已经存在于DOM中的按钮生效。而Bootstrap-table在分页、搜索或者排序后，会重新生成表格的内容（也就是tbody里的元素），原来的按钮被替换成了新的DOM节点，这些新节点并没有被绑定点击事件，自然就没反应了。

下面给你两种靠谱的解决方案，选哪种都行：

方案一：使用事件委托（推荐） #

利用事件冒泡的特性，把点击事件绑定到一个始终存在的父元素上（比如表格本身、或者更上层的容器），让父元素去监听子元素的点击。这样不管表格怎么重新渲染，新生成的按钮只要匹配选择器，事件就能触发。

代码示例：

// 替代你原来的 $('.btn-danger').click(...) 写法
$('#table').on('click', '.btn-danger', function() {
  var itemId = $(this).data('id');
  alert(`要删除的条目ID是：${itemId}`);
});

这里把事件绑定到了表格#table上，它是始终存在的，当点击.btn-danger按钮时，事件会冒泡到表格，然后触发我们的处理函数。这种方式不需要关心表格什么时候重新渲染，一劳永逸，而且性能也不错。

方案二：监听Bootstrap-table的渲染完成事件 #

Bootstrap-table提供了专门的事件钩子，比如post-body.bs.table，这个事件会在表格的主体内容（tbody）渲染完成后触发。我们可以在这个事件里重新绑定按钮的点击事件。

代码示例：

// 先写一个绑定事件的复用函数
function setupDeleteButtons() {
  // 先移除旧的绑定，避免重复触发
  $('.btn-danger').off('click').on('click', function() {
    var itemId = $(this).data('id');
    alert(`要删除的条目ID是：${itemId}`);
  });
}

// 页面首次加载时绑定一次
setupDeleteButtons();

// 每次表格渲染完成后，重新绑定
$('#table').on('post-body.bs.table', function() {
  setupDeleteButtons();
});

这种方式适合你需要在表格渲染后做更多额外操作的场景，但要记得用.off('click')清除旧的绑定，不然同一个按钮可能会被绑定多次，点击一次触发好几次事件。

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