jQuery 数据表，如何在表的所有行上绑定事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15293094/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Datatables, how to bind event on all rows of the table
提问by MaVRoSCy
My datatable is working fine except the fact that i am trying to add a dblclickfunctionality on each row, which that works partially.
我的数据表工作正常，除了我试图dblclick在每一行上添加一个功能，这部分工作。
So, this is my code:
所以，这是我的代码：
oTable = $('#example').dataTable({
"aaSorting": [[ 1, "desc" ]],
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});
/* Add a click handler to the rows */
//This highlights the row selected
$("#example tbody").click(function(event) {
$(oTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
});
//this attaches a dblclick event on the row
$("#example tr").dblclick(function() {
var iPos = oTable.fnGetPosition( this );
var aData = oTable.fnGetData( iPos );
var iId = aData[1];
$('#edit'+iId).click(); //clicks a button on the first cell
});
The highlighting of rows is ok for all rows of the tables, but the dblclickis working ONLY for the rows that where initially rendered in the first page. When I sort/search data and the data displayed change, the dblclickevent does not work for those rows that where not displayed in the first page.
行的突出显示适用于表的所有行，但dblclick仅适用于最初在第一页中呈现的行。当我对数据进行排序/搜索并且显示的数据发生变化时，该dblclick事件对那些未显示在第一页中的行不起作用。
Can anyone help to solve this mystery? Thanks
任何人都可以帮助解开这个谜团吗？谢谢
回答by DKSan
The first answer is near perfect, but has to have one little tweak that stops it from working.
第一个答案近乎完美，但必须进行一些小调整才能使其停止工作。
As in the jquery apidoc on()you have to add the [, selector ]as i did below with the "tr"
就像在 jquery apidoc on() 中一样，您必须[, selector ]像我在下面所做的那样添加"tr"
$("#example").on("dblclick", "tr", function() {
var iPos = oTable.fnGetPosition( this );
var aData = oTable.fnGetData( iPos );
var iId = aData[1];
$('#edit'+iId).click(); //clicks a button on the first cell
});
回答by Iman
in case you need a different but similar scenario to bind to all specific classes inside datatable see below sample
如果您需要一个不同但相似的场景来绑定到数据表中的所有特定类，请参见下面的示例
$("#sample_2 tbody").on("click", "a.ApproveLink", approveLinkHandler);
also consider following official doc about this issue:
还可以考虑以下有关此问题的官方文档：
One of the best ways of dealing with this is through the use of delegated eventswith jQuery's on method
处理这个问题的最好方法之一是使用带有 jQuery 的 on 方法的 委托事件
https://datatables.net/examples/advanced_init/events_live.html
https://datatables.net/examples/advanced_init/events_live.html
回答by PSR
try this
尝试这个
$("#example tbody").on("click",function(event) {
$(oTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
});
$("#example tr").on("dblclick",function() {
var iPos = oTable.fnGetPosition( this );
var aData = oTable.fnGetData( iPos );
var iId = aData[1];
$('#edit'+iId).click(); //clicks a button on the first cell
});
we can use events directly on the data which will load when the page is loading.Othersise we need to use on.
我们可以直接在页面加载时加载的数据上使用事件。其他我们需要使用。
