我正在使用DataTables jQuery Plugin,并在行单击上设置了一个单击处理程序,如下所示:
$('#dt tbody tr').click(function () {
alert('e');
});
这对于DataTables结果的第一页非常有效。
但是,当我移动到结果的另一页时,单击处理程序根本不再注册。
我的假设是,DataTables代码会停止将click
事件传播给我的处理程序,但由于这种情况只发生在第一个事件之后的页面上,所以看起来很不寻常。
因此,有没有人:
干杯
发布于 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' );
}
} );
} );
发布于 2011-05-13 07:59:19
我猜事件处理程序绑定只应用于初始加载的行。但是,一旦行集合在标记中重新呈现,事件处理程序就不再存在。
查看jQuery的live()函数。关键是事件处理程序被绑定到满足选择器标准的所有元素“现在和将来”。
发布于 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
});
希望这能有所帮助!
https://stackoverflow.com/questions/5985884
复制相似问题