Question

我的组件“Bootstrap table”有问题。我有一个列，在单击时显示一个简单的弹出窗口，但是如果我更改页面或搜索结果，如果我重新点击它，则不再显示弹出窗口（此问题不仅发生在弹出框中，还发生在其他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>

Answer 1

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

更新1：

这会更容易，用以下内容替换现有脚本：

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

请勿忘记将$（＆＃39; table＆＃39;）替换为您希望其生效的特定表格。

搜索后Boostrap表按钮不起作用

1 个答案: