JQuery 數據表中的引導彈出窗口在搜索后不起作用

Question

我有一個 HTML 表：

 <table id="PeopleTable" class="table table-striped table-bordered"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Pop</th> </tr> </thead> <tbody> <tr><td>0</td><td>Michael</td><td><button class='popoverButton'>Popover</button></td></tr> </tbody></table>

我想使用 DataTables 插件來擁有搜索、排序和過濾功能。 我還想使用 Bootstrap 在單擊按鈕時顯示一個彈出窗口，所以我嘗試了這個：

 var peopleTable = $('#PeopleTable').DataTable({ drawCallback: function () { $('.popoverButton').popover({ "html": true, trigger: 'manual', placement: 'left', "content": function () { return "<div>Popover content</div>"; } }).click(function (e) { $(this).popover('toggle'); e.stopPropagation(); }); } });

問題是：當我對 DataTable 執行搜索、列排序或任何操作時，Popover 停止工作。

如果您想嘗試，這里是小提琴。

“繪制”是執行此操作的正確事件還是我應該使用另一個？ 我還缺少其他東西嗎？

Answer 1

更新了 JS 小提琴鏈接 - https://jsfiddle.net/dxrjm530/4/

您只需要取出按鈕的單擊事件，因為在排序后，由於數據表的drawcallback方法，它會被調用兩次。

 $('#PeopleTable').DataTable({ drawCallback: function () { $('.popoverButton').popover({ "html": true, trigger: 'manual', placement: 'left', "content": function () { return "<div>Popover content</div>"; } }) } }); $('#AddRow').on('click', function(){ var peopleTable = $('#PeopleTable').DataTable(); peopleTable.row.add( ['1', "David", "<button class='popoverButton'>Popover</button>"] ).draw(); }); $('table').on('click', function(e){ if($('.popoverButton').length>1) $('.popoverButton').popover('hide'); $(e.target).popover('toggle'); });

Answer 2

可能的解決方案： https://stackoverflow.com/a/72850074/979174

 const rows = $("#tbl").dataTable().fnGetNodes(); $(rows).find('[data-toggle="popover"]').popover({ html: true, trigger: 'hover', placement: 'bottom', content: function () { return $(this).data('content'); } });