Javascript jQuery DataTables-行单击不在第一页以外的页面上注册
我正在使用，并在行单击上设置了一个单击处理程序，如下所示：Javascript jQuery DataTables-行单击不在第一页以外的页面上注册,javascript,jquery,events,datatables,jquery-events,Javascript,Jquery,Events,Datatables,Jquery Events,我正在使用，并在行单击上设置了一个单击处理程序，如下所示： $('#dt tbody tr').click(function () { alert('e'); }); 这非常适合DataTables结果的第一页 但是，当我移动到另一个结果页面时，单击处理程序不再注册 我的假设是DataTables代码正在停止向我的处理程序传播click事件，但由于这只发生在第一个事件之后的页面上，因此似乎不寻常 因此，是否有人： 遇到（并理想地解决）此问题 找到了一种跟踪jQuery/JS事件
$('#dt tbody tr').click(function () {
alert('e');
});
click干杯我猜事件处理程序绑定只应用于最初加载的行。但一旦行集合在标记中重新呈现，事件处理程序就不再存在了
查看jQuery的函数。关键在于事件处理程序被绑定到所有符合选择器标准的元素“现在和将来”。我对所有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
});
希望有帮助 我在一个单页应用程序中遇到了这个问题。除了回发后的，live方法对我有效。我的表是通过ajax填充的，用户可以破坏并重新创建它 为了修复它，我使用了dataTables。$： "http://datatables.net/api#$” 下面是我使用DataTables为hidden row函数提供的示例进行的修复
$(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' );
}
} );
} );
$（文档）.ready（函数（）{
/*
*在表中插入“详细信息”列
*/
var nCloneTh=document.createElement（'th'）；
var nCloneTd=document.createElement（'td'）；
nCloneTd.innerHTML=''；
nCloneTd.className=“中心”；
/*更改：删除前面添加的所有展开控件元素
*否则，您将为每次回发添加一个新列
*/
$（'.expand control'）.remove（）；
/*
*更改：将扩展控件类添加到这些元素，
*所以我们可以在回发后删除它们
*/
$（nCloneTh）.addClass（'expand-control'）；
$（nCloneTd）.addClass（'expand-control'）；
$（'#示例thead tr'）。每个（函数（）{
this.insertBefore（nCloneTh，this.childNodes[0]）；
} );
$（'#示例tbody tr'）。每个（函数（）{
this.insertBefore（nCloneTd.cloneNode（true），this.childNodes[0]）；
} );
/*
*初始化DataTables，在“详细信息”列上不排序
*/
var oTable=$（'#示例'）。数据表（{
“aoColumnDefs”：[
{“bSortable”：false，“aTargets”：[0]}
],
“aaSorting”：[[1，‘asc']]
});
/*为打开和关闭详细信息添加事件侦听器
*请注意，用于显示的指示器
*打开的行不受DataTables控制，
*而是在这里完成的
*/
/*更改：这里我使用jQuery.dataTable.$而不是
*jQuery（“#示例tbody td img”），
*这就是将事件处理程序保留在第二个（etc）上的原因
*回邮后的页面
*请注意，从1.7开始，建议使用on而不是live
*/
可旋转。$（'tr'）。查找（'img'）。打开（'click'，函数（）{
var nTr=$（this.parents（'tr'）[0]；
if（可旋转FNISOBEN（nTr））
{
/*此行已打开-关闭它*/
this.src=“../examples\u support/details\u open.png”；
可旋转。关闭（nTr）；
}
其他的
{
/*打开这一排*/
this.src=“../examples\u support/details\u close.png”；
fnOpen（nTr，fnFormatDetails（oTable，nTr），“details”）；
}
} );
} );
$(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
});
您可以与某个父元素交换文档，因为它效率不高。也许可以尝试使用包含您的表格的div。我的答案与@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 }
]
});
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');
}
} );
oTable.$（'td'）。每个（函数（）{
$（此）.on（'click'，'img'，函数（）{
var nTr=$（this.parents（'tr'）[0]；
if（可旋转FNISOBEN（nTr））
{
/*此行已打开-关闭它*/
this.src=“${pageContext.request.contextPath}/theme/v_1_0/app images/details_open.png”；
可旋转。关闭（nTr）；
}
其他的
{
/*打开这一排*/
this.src=“${pageContext.request.contextPath}/theme/v_1_0/app images/details_close.png”；
var html='此处占位符..'；
fnOpen（nTr，html，'details'）；
}
} );
ajaxComplete点击$（'#dt tbody tr'）。live（'click'，function（）ajaxComplete