jQuery DataTables -行单击不在第一页以外的其他页面上注册
jQuery DataTables -行单击不在第一页以外的其他页面上注册
提问于 2011-05-13 07:56:49
我正在使用DataTables jQuery Plugin，并在行单击上设置了一个单击处理程序，如下所示：
$('#dt tbody tr').click(function () {
alert('e');
});这对于DataTables结果的第一页非常有效。
但是，当我移动到结果的另一页时，单击处理程序根本不再注册。
我的假设是，DataTables代码会停止将click事件传播给我的处理程序，但由于这种情况只发生在第一个事件之后的页面上，所以看起来很不寻常。
因此，有没有人：
- 遇到此问题(理想情况下已解决)
- 找到了一种跟踪jQuery/JS事件传播的好方法，以隔离事件被停止的原因
干杯
回答 4
Stack Overflow用户
回答已采纳
发布于 2012-12-04 23:44:10
我在一个单页面应用程序中遇到了这个问题。除了回发后的，live方法在我的上工作。我的表是通过ajax填充的，用户可以将其销毁并重新创建。
为了修复它，我使用了dataTables。$："http://datatables.net/api#$“
以下是我使用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' );
}
} );
} );Stack Overflow用户
发布于 2011-05-13 07:59:19
我猜事件处理程序绑定只应用于初始加载的行。但是，一旦行集合在标记中重新呈现，事件处理程序就不再存在。
查看jQuery的live()函数。关键是事件处理程序被绑定到满足选择器标准的所有元素“现在和将来”。
Stack Overflow用户
发布于 2012-04-21 16:04:13
我的所有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
});希望这能有所帮助！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5985884
复制相关文章
相似问题