Question

每次点击图表项时，我都会重新绘制一个JQuery数据表。

我正在使用.on()来捕获click事件，这非常适合捕获所有行上的点击事件，包括那些当前不在DOM中的点击事件（即不在第1页上）。但是，虽然捕获了click事件，但是一旦重绘了数据表，我似乎无法访问click事件中的数据。以下是AJAX .success函数中包含的代码：

ajax_call()
    .success(function (data) {
        ...
        var table = $('#datatable').DataTable({...});
        ...
        $('#datatable tbody').on( 'click', 'tr', function () {
            var d = table.row( this ).data();
        });
    });

错误：TypeError: d is undefined

所以我尝试了bind('click', ...) catch：

$('#datatable tbody tr').bind( 'click', function () {
    var d = table.row( this ).data();
});

但是这只捕获DOM中行（即第一页）的点击事件。

那么，即使在AJAX .success函数中重绘了数据表，我应该如何捕获所有页面的点击事件？

Answer 1

您可以尝试在表容器和事件处理程序中绑定click事件，检查所单击的目标是否是您要查找的热点：

$('#datatable_container').bind( 'click', function (event) {
    var $target = $(event.target);
    if($target.prop("tagName") == "TR") {
       //Do something
       //...
    }
});

由于我无法看到你的来源，我假设它看起来像这样：

<div id="datatable_container">
    <table id="datatable">...</table>
</div>

我做了Plunker表明我的意思。希望它有所帮助。

Answer 2

答案是在使用.off（）方法重新初始化表之前，“解除绑定”.on（）单击事件。元素上的多个绑定事件会导致数据和绑定堆叠。

简单地说：

ajax_call().success(function (data) {
    ...
    $('#datatable tbody').off( 'click', 'tr');
    var table = $('#datatable').DataTable({...});
    ...
    $('#datatable tbody').on( 'click', 'tr', function () {
        var d = table.row( this ).data();
    });
});

在后AJAX绘制的数据表上单击事件不能在第二页上工作

2 个答案: