添加data-toggle=table后Bootstrap Table行按钮失效问题求助

问题原因 #

Bootstrap Table通过data-toggle=table初始化时，会重新生成表格的DOM结构，你之前直接绑定在按钮上的事件，因为原DOM元素被替换，所以新渲染的按钮无法触发原有事件。

解决方案 #

方案1：使用事件委托绑定按钮事件 #

把按钮的点击事件委托给一个不会被替换的父元素（比如页面的document或者表格容器），这样不管表格怎么重新渲染，新生成的按钮都能触发事件。

替换你原来的按钮绑定代码：

// 原来的写法（失效）
$('.moreButton').click(function() {
  // 按钮逻辑
});

// 改成事件委托写法
$(document).on('click', '.moreButton', function() {
  // 你的按钮逻辑代码
});

方案2：在Bootstrap Table渲染完成后重新绑定事件 #

利用Bootstrap Table提供的post-body.bs.table事件，这个事件会在表格数据加载完成、DOM重新渲染后触发，在这个时机重新绑定按钮事件。

代码示例：

// 监听表格渲染完成事件
$('table[data-toggle="table"]').on('post-body.bs.table', function() {
  // 重新绑定按钮点击事件
  $('.moreButton').click(function() {
    // 你的按钮逻辑代码
  });
});

这两种方法都能解决冲突，让表格的搜索排序功能和行内按钮同时正常工作。

内容的提问来源于stack exchange，提问作者Enrique Martín Hernández