搜索后引导表按钮不起作用答案

【问题标题】：Boostrap table button don't work after search搜索后引导表按钮不起作用
【发布时间】：2017-03-29 07:18:53
【问题描述】：

我对“引导表”组件有疑问。我有一列在单击时显示一个简单的弹出框，但是如果我更改页面或搜索结果，如果我重新单击它，则不再显示弹出框（此问题不仅发生在 popover 上，还发生在其他 js方法）。即使我使用了DataTable，也不会发生这个问题。我该如何解决？这是我的代码：

<!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <!-- Jquery library for bootstrap-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<table class="table color-table info-table" data-toggle="table" data-search="true" data-classes="table-no-bordered">
  <thead>
    <tr>
      <th data-field="codice" data-sortable="true">Codice</th>
      <th data-field="nome" data-sortable="true">Nome</th>
      <th data-field="server" data-sortable="true">Server</th>
      <th data-field="database" data-sortable="true">Database</th>
      <th data-field="versione" data-sortable="true">Versione</th>
      <th data-field="attivo" data-sortable="true">Attivo</th>
      <th>Licenza</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="txt-oflo">17894</td>
      <td>Ekipe</td>
      <td class="txt-oflo">oasis.amcweb.it</td>
      <td>ET_017894</td>
      <td>5.16.20</td>
      <td>SI</td>
      <td><button type="button" class="btn btn-info" data-toggle="popover" title="TEST 2" data-content="Some content inside the popover" data-placement="top">Visualizza</button></td>
    </tr>
    <tr>
      <td class="txt-oflo">14785</td>
      <td>Ekipe</td>
      <td class="txt-oflo">web.amclab.it</td>
      <td>ET_017894</td>
      <td>5.16.20</td>
      <td>SI</td>
       <td><button type="button" class="btn btn-info" data-toggle="popover" title="TEST 1" data-content="Some content inside the popover" data-placement="top">Visualizza</button></td>
    </tr>
  </tbody>
</table>

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover(); 
});
</script>

【问题讨论】：

排序时，html 元素/节点将从 DOM 中删除并重新添加。此时，分配给它们的任何事件都不再起作用，因为事件仅适用于在事件启动时存在的 DOM 元素。您应该能够通过在排序后重新启动弹出框来解决这个问题（即挂钩到排序事件并调用$('[data-toggle="popover"]').popover();）
修复它 -->
如果您使用委托事件（例如点击处理程序），大多数情况下您不需要重新启动。但是，我不明白为什么您“不能随时重新启动” - 只需将您的 init 脚本放在一个单独的函数中，然后从 doc ready 和 sort 中调用它。这样你只有一组初始化代码，但从两个地方调用它。所以不管有多少代码，你都在为初始初始化维护它。

标签： jquery twitter-bootstrap bootstrap-table

【解决方案1】：

您应该在每次触发修改表的脚本后运行execute $('[data-toggle="popover"]').popover();。

更新 1：

这会更容易，用这个替换现有的脚本：

$('table').on('post-body.bs.table', function () { $('[data-toggle="popover"]').popover(); });

不要忘记将 $('table') 替换为您打算使其生效的特定表。

【讨论】：

我不喜欢这个方案，这个时候最好用DataTable，没有这个问题
恐怕你在这里别无选择，除了更新 1。