数据表,如何在表的所有行上绑定事件

我的数据表工作正常,除了我试图在每一行上添加dblclickfunction,这部分工作。

所以,这是我的代码:

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

行的突出显示对于表的所有行都是可以的,但是dblclick仅适用于最初在第一页中呈现的行。 当我对数据进行排序/搜索并且显示的数据发生更改时, dblclick事件对于那些未在第一页中显示的行不起作用。

任何人都可以帮助解决这个谜团吗? 谢谢

第一个答案是接近完美,但必须有一个小的调整,以阻止它工作。

就像在jquery apidoc on()中一样,你必须像下面的"tr"那样添加[, selector ]

 $("#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 }); 

如果你需要一个不同但相似的场景来绑定到datatable中的所有特定类,请参阅下面的示例

 $("#sample_2 tbody").on("click", "a.ApproveLink", approveLinkHandler); 

还考虑关注此问题的官方文档:

解决这个问题的最好方法之一是使用jQuery的on方法委托事件

https://datatables.net/examples/advanced_init/events_live.html

试试这个

  $("#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 }); 

我们可以直接在页面加载时加载的数据上使用事件。我们需要使用它们