javascript jQuery DataTables - 行点击不会在第一个页面以外的页面上注册
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5985884/
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
jQuery DataTables - Row click not registering on pages other than first
提问by Matt Mitchell
I'm using the DataTables jQuery Pluginand have a click handler setup on row click as follows:
我正在使用DataTables jQuery 插件，并在行单击时设置了一个单击处理程序，如下所示：
$('#dt tbody tr').click(function () {
alert('e');
});
This works perfectly for the first page of DataTables results.
这对于 DataTables 结果的第一页非常有效。
However, when I move to another page of results, the click handler no longer registers at all.
但是，当我移动到另一页结果时，单击处理程序根本不再注册。
My presumption is that the DataTables code is stopping the propogation of the clickevent to my handler, but as this is only occurring on pages after the first it seems unusual.
我的假设是 DataTables 代码正在停止将click事件传播到我的处理程序，但由于这仅发生在第一个之后的页面上，因此似乎不寻常。
As such, has anyone:
因此，有没有人：
- Encountered (and ideally resolved) this problem
- Found a good way to track jQuery/JS event propogation to isolate why the event is being stopped
- 遇到（并理想地解决）这个问题
- 找到了一种跟踪 jQuery/JS 事件传播的好方法来隔离事件被停止的原因
Cheers
干杯
采纳答案by Chris Everitt
I had this problem on a single page application. The live method worked for me exceptafter a postback. My table was populated via ajax, and the user could cause it to be destroyed and recreated.
我在单页应用程序上遇到了这个问题。除了回发之后，实时方法对我有用。我的表是通过 ajax 填充的，用户可能会导致它被破坏和重新创建。
To fix it I used dataTables.$: "http://datatables.net/api#$"
为了修复它，我使用了 dataTables.$: "http://datatables.net/api#$"
Here is my fix using the example DataTables give for the hidden row function.
这是我使用示例 DataTables 为隐藏行函数提供的修复。
$(document).ready(function() {
/*
* Insert a 'details' column to the table
*/
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '<img src="../examples_support/details_open.png">';
nCloneTd.className = "center";
/* CHANGE: Remove all the expand control elements we may have added earlier
* or else you'll add a new column for every postback
*/
$('.expand-control').remove();
/*
* CHANGE: Add the expand-control class to these elements,
* so we can remove them after a postback
*/
$(nCloneTh).addClass('expand-control');
$(nCloneTd).addClass('expand-control');
$('#example thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );
$('#example tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );
/*
* Initialse DataTables, with no sorting on the 'details' column
*/
var oTable = $('#example').dataTable( {
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
],
"aaSorting": [[1, 'asc']]
});
/* Add event listener for opening and closing details
* Note that the indicator for showing
* which row is open is not controlled by DataTables,
* rather it is done here
*/
/* CHANGE: Here I use jQuery.dataTable.$ instead of
* jQuery('#example tbody td img'),
* this is what preserves the event handler on the 2nd (etc)
* pages after a postback
* Note the use of on instead of live, recommended over live as of 1.7
*/
oTable.$('tr').find('img').on('click', function () {
var nTr = $(this).parents('tr')[0];
if ( oTable.fnIsOpen(nTr) )
{
/* This row is already open - close it */
this.src = "../examples_support/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "../examples_support/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );
} );
回答by Kon
I'm guessing the event handler binding is being applied only to the initially loaded rows. But once the row collection gets re-rendered in the markup, the event handlers are no more.
我猜事件处理程序绑定仅应用于最初加载的行。但是一旦行集合在标记中重新呈现，事件处理程序就不再存在。
Check out jQuery's live()function. The key there being that event handlers are bound for all elements meeting selector criteria "now and in the future."
查看 jQuery 的live()函数。关键是事件处理程序绑定到“现在和将来”满足选择器标准的所有元素。
回答by BD_Design
I had the same issue with buttons in all of my DataTables rows, the click event didn't work on any buttons after the first page of results. Kon gave the correct analysis (thank you Kon), but for those looking for example code, here's what worked for me:
我的所有 DataTables 行中的按钮都遇到了同样的问题，在第一页结果之后，单击事件对任何按钮都不起作用。Kon 给出了正确的分析（谢谢 Kon），但是对于那些寻找示例代码的人来说，这对我有用：
$('.myButton').live('click', function() {
var id = $(this).closest("tr").attr("id");
var string = 'div_id=' + id;
alert(string);
// string sent to processing script here
});
Hope that helps!
希望有帮助！
回答by Ken Johnson
Since live is now deprecated, i suggest using '.on'.
由于 live 现在已弃用，我建议使用“.on”。
This should solve your problem:
这应该可以解决您的问题：
$(document).on('click', '.myButton', function() {
var id = $(this).closest("tr").attr("id");
var string = 'div_id=' + id;
alert(string);
// string sent to processing script here
});
You can exchange documentwith some parent element as it is not very efficient. Perhaps try using a div containing your table.
您可以与某些父元素交换文档，因为它不是很有效。也许尝试使用包含您的表格的 div。
回答by Sirish
My answer is similar to that of @Chris Everitt, with a slight difference. Just for those who would like to see it.. here it goes..
我的回答与@Chris Everitt 的回答相似，但略有不同。只为那些想看的人..在这里..
var oTable = $('#masterTable').dataTable( {
"aLengthMenu": [[5,10, 25, 50, 100 , -1], [5,10, 25, 50, 100, "All"]],
"iDisplayLength" : 10,
"aoColumnDefs": [
{"sWidth": "25%", "aTargets": [ 0 ] },
{"sWidth": "10%", "aTargets": [ 1 ] },
{"sWidth": "10%", "aTargets": [ 2 ] },
{"sWidth": "10%", "aTargets": [ 3 ] },
{"sWidth": "10%", "aTargets": [ 4 ] },
{"sWidth": "10%", "aTargets": [ 5 ] },
{"sWidth": "15%", "aTargets": [ 6 ] },
{"sClass": "align-left" , "aTargets": [ 0,1,4, 2,3,5,6] }
],
"aoColumns": [
{ "bSortable": true },
null, null, null,null, null,
{ "bSortable": true }
]
});
Registering event for all img (dom attr's) in the table -
为表中的所有 img（dom attr）注册事件 -
oTable.$('td').each( function () {
$(this).on('click','img', function () {
var nTr = $(this).parents('tr')[0];
if ( oTable.fnIsOpen(nTr) )
{
/* This row is already open - close it */
this.src = "${pageContext.request.contextPath}/theme/v_1_0/app-images/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "${pageContext.request.contextPath}/theme/v_1_0/app-images/details_close.png";
var html = '<div> Placeholder here.. </div>';
oTable.fnOpen(nTr, html, 'details');
}
} );
