Boostrap表按钮在搜索后不起作用

我对组件“Bootstrap表”有问题。点击时，我有一列显示简单的弹出窗口，但如果我更改页面或搜索结果，如果我重新点击它，不会再显示弹出窗口（这个问题不仅发生在popover上，而且还发生在其他js上方法）。即使我使用DataTable，这个问题也不会发生。我该如何解决它？这是我的代码：Boostrap表按钮在搜索后不起作用

<!-- 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>

来源

2017-03-29 Mintendo

排序时，将从DOM中删除html元素/节点并重新添加。此时，分配给它们的任何事件都不再起作用，因为事件仅在事件启动时存在的DOM元素上起作用。你应该能够通过在排序后重新启动popover来解决这个问题（即挂钩到排序事件中并调用'$（'[data-toggle =“popover”]'）popover（）;'） –

修复它 - >

Boostrap表按钮在搜索后不起作用

相关问题