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

        });

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

1 个答案: