Bootstrap JQuery 数据表中的弹出窗口在搜索后不起作用

Question

我有一个 HTML table:

<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如果你想试试

"draw" 是执行此操作的正确事件还是我应该使用另一个？我还遗漏了什么吗？

Answer 1

已更新 JS fiddle link - 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');

        });

Bootstrap JQuery 数据表中的弹出窗口在搜索后不起作用

Bootstrap Popover in JQuery Datatable doesn't work after search

javascript

jquery

datatables

twitter-bootstrap

bootstrap-popover