对于 jquery 插件数据表，为什么单击事件不起作用？答案

【问题标题】：For the jquery plugin datatables, why the click event not functioning?对于 jquery 插件数据表，为什么单击事件不起作用？
【发布时间】：2014-08-13 02:13:12
【问题描述】：

我正在使用数据表，它是使用 jquery 生成表的简单而强大的工具

参考链接在这里：您也可以在该网站上尝试。

https://datatables.net/

问题是，例如，我有一个有 20 行的表。如果每页显示 10 行，则有两页。对于每一行，都有一个按钮，我捕获该按钮上的点击事件。例如

$('.row_button').on('click',function()){
....
});

问题是，对于第一个页面按钮，可以触发点击事件，但对于其他页面则没有，根本没有响应脚本在 chrome 开发人员中没有错误。我认为页面导航按钮会影响点击事件。但是如何解决呢？谢谢

【问题讨论】：

如何将 onclick 事件绑定到上层 dom 元素（例如 table 本身或 body 元素，而不是按钮本身？$(document.body).on( "click", ".row_button ", function() { //... });
只有第一页的行被绑定到一个事件，而不是整个数据集

标签： javascript jquery html datatable

【解决方案1】：

除了上面的答案，其实官方已经有了这个答案

最常见的常见问题解答

问。我的活动在第二页上不起作用

A.将事件附加到由 DataTables 控制的表格中的单元格时，您需要小心它是如何完成的。因为 DataTables 从 DOM 中删除节点，所以使用静态事件侦听器应用的事件可能无法将自己绑定到表中的所有节点。要克服这个问题，只需使用 jQuery 委托事件侦听器选项，如本例所示。此外，您可以使用我的 Visual Event 小书签来帮助调试事件问题。

参考：http://datatables.net/faqs/#events

 $('#example tbody').on('click', 'tr', function () {
        var name = $('td', this).eq(0).text();
        alert( 'You clicked on '+name+'\'s row' );
    } );

优雅而实用

【讨论】：

【解决方案2】：

经过一番搜索，我设法得到了一个丑陋的解决方案，似乎问题是每个页面都是动态添加到页面引起的，但是，jquery“on”不起作用，我不知道。这段代码终于成功了。

   $('#data_table').dataTable({
            "fnDrawCallback": function() {
                $('.showDetail').unbind('click');
                $('.showDetail').on('click', function() {
                ...........
                });
            }
        });

【讨论】：