Javascript JQuery数据表中的引导式Popover不'；搜索后不工作

我有一个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();
                });
            }
        });

var peopleTable=$（'#peopleTable'）.DataTable({
drawCallback:函数（）{
$（'.popoverButton'）.popover({
“html”：正确，
触发器：“手动”，
位置：'左'，
“内容”：功能（）{
返回“Popover内容”；
}
})。单击（功能（e）{
$（this.popover（'toggle'）；
e、 停止传播（）；
});
}
});

问题是：当我对DataTable执行搜索、列排序或任何操作时，Popover停止工作

如果你想试试的话

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

更新了JS fiddle链接-

您只需要取出按钮的click事件，因为排序后，由于datatable的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');

        });

$（'PeopleTable'）。数据表({
drawCallback:函数（）{
$（'.popoverButton'）.popover({
“html”：正确，
触发器：“手动”，
位置：'左'，
“内容”：功能（）{
返回“Popover内容”；
}
})
}
});
$（'#AddRow'）。在（'单击'，函数（）上）{
var peopleTable=$（'#peopleTable'）.DataTable（）；
peopleTable.row.add(
['1',
“大卫”，
“爆米花”]
).draw（）；
});
$（'table'）。在（'click'，函数（e）上{
如果（$（'.popoOverButton'）。长度>1）
$（'.popoverButton'）.popover（'hide'）；
$（e.target.popover（'toggle'）；
});

更新了JS fiddle链接-

您只需要取出按钮的click事件，因为排序后，由于datatable的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');

        });

$（'PeopleTable'）。数据表({
drawCallback:函数（）{
$（'.popoverButton'）.popover({
“html”：正确，
触发器：“手动”，
位置：'左'，
“内容”：功能（）{
返回“Popover内容”；
}
})
}
});
$（'#AddRow'）。在（'单击'，函数（）上）{
var peopleTable=$（'#peopleTable'）.DataTable（）；
peopleTable.row.add(
['1',
“大卫”，
“爆米花”]
).draw（）；
});
$（'table'）。在（'click'，函数（e）上{
如果（$（'.popoOverButton'）。长度>1）
$（'.popoverButton'）.popover（'hide'）；
$（e.target.popover（'toggle'）；
});

我需要在绘制Datatable之后声明click事件，因为我正在动态添加行。看看。我需要在绘制Datatable之后声明click事件，因为我正在动态添加行。看一看。