JQuery Datatable中的Bootstrap Popover在搜索后不起作用

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 停止工作。

Here is the fiddle如果你想试试的话。

“绘制”是执行此操作的正确事件还是应该使用另一个？我还有什么遗漏吗？

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');

        });