在第二页的 JQuery 数据表中无法识别 JQuery onclick 事件答案

【问题标题】：JQuery onclick event isn't recognizing in JQuery datatable from second page在第二页的 JQuery 数据表中无法识别 JQuery onclick 事件
【发布时间】：2011-09-28 07:24:16
【问题描述】：

我有 JQuery 数据表，我想在单击删除链接时删除行。它适用于前 10 行，即第一页。当我从分页移到任何另一个时。它不工作。这是我的代码：

$("#example tbody td.delete").click(function(event) {
                var row = $(this).closest("tr").get(0);
                oTable.fnDeleteRow( row );
    });

一行的所有最后一个 td 都有“删除”类。

我应该如何处理所有页面或所有记录？

【问题讨论】：

标签： javascript jquery jquery-datatables

【解决方案1】：

如果您使用的是 jQuery 1.7 或更早版本，则需要使用实时事件处理程序，因为后续页面是动态添加的。

$('#example tbody td.delete').live('click', function(event) {
    var row = $(this).closest('tr').get(0);
    oTable.fnDeleteRow( row );
});

jQuery .live()

编辑：

看起来人们仍在使用此答案，因此要使用最新的最佳实践对其进行更新，请勿使用 .live()。 Live 在 1.7 中被弃用，在 1.9 中被移除。相反，请使用 .on() 处理程序。这可以通过将事件绑定到父元素并使用您想要定位的实际元素作为可选的 selector 参数来处理委托事件。把它用在上面的例子中，它看起来像这样：

$('#example tbody').on('click', 'td.delete', function(event) {
    var row = $(this).closest('tr').get(0);
    oTable.fnDeleteRow( row );
});

【讨论】：

我使用 live 但在 firebug 中显示此错误“Resuming debugger: error during debugging loop: TypeError: firstViewRangeElement is null” (a || "").split is not a function
$Christian 我正在使用 jquery-1.5.2.min.js
可能是 firefox/firebug 问题，Google 是你的朋友 :) code.google.com/p/fbug/issues/detail?id=4348
使用这种事件处理程序是可行的方法。我可能会建议使用 .delegate() 代替 .live() 但这是个人喜好。
我从来没有真正使用过.delegate()，只是检查了一下，这似乎是要走的路。我将来会使用它而不是 .live()，很棒的提示！

【解决方案2】：

我在尝试绑定内联事件时遇到了同样的问题

 onclick="$('#dataConfirmOK').attr('href',$(this).attr('url'))"

【讨论】：

【解决方案3】：

如果实时扩展不起作用，那么您可以额外添加实时扩展插件。 http://plugins.jquery.com/files/live-extension.js_4.txt

最好在加载时绑定下一页项目的“点击事件”。请在每次页面加载时加载下面的代码。并定义函数“click_function_to_call”。

<script type="application/javascript">
  $("#example tbody td.delete").click(click_function_to_call);
</script>

【讨论】：

.live() 自 1.3 以来一直是 jQuery 的一部分，您不需要加载外部库。此外，数据表动态加载页面，因此绑定到 click 事件不适用于分页。最后，您应该始终将事件处理程序包装在文档就绪函数中。