JQuery委托方法不起作用

Question

我正在尝试在我使用DataTables.Net插件包装的网格上使用委托方法。我最初有这个代码按预期工作。

    $("#myGrid tbody tr").click(function() {
        var id = $(this).children('td').eq(0).text();
        alert(id);
    });

但是，如果我更改分页大小，则较新的行没有调用该函数的click事件。我决定新的JQuery委托方法应该完全符合我的要求;但是，它对任何tr元素都没有任何作用。

有人可以解释为什么这不起作用：

    $('#myGrid tbody').delegate('tr', 'click', function() {
        var id = $(this).children('td').eq(0).text();
        alert(id);
    }); 

我尝试了选择器的不同组合，没有一个让它起作用。

由于 Paul Speranza

Answer 1

请改为尝试：

$('#myGrid').delegate('tr', 'click', function() {
  var id = $(this).children('td').eq(0).text();
  alert(id);
});

很有可能你身上的某些事件变得混乱和/或你的身体被操纵了。我怀疑整个表格也遇到了这个问题。

Answer 2

使用此：

$("#myGrid tbody tr").live('click', function() {
    var id = $(this).children('td').eq(0).text();
    alert(id);
});

.live()适用于未来元素的当前。

Answer 3

在幕后，bind，delegate和live都使用 on 方法。

delegate我遇到了一些问题，所以我开始使用on。 将delegate调用转换为on很简单：只需交换第一个和第二个参数。

此：

 $('#myGrid tbody').delegate('tr', 'click', function() {
        var id = $(this).children('td').eq(0).text();
        alert(id);
    }); 

成为这个：

 $('#myGrid tbody').on('click', 'tr', function() {
        var id = $(this).children('td').eq(0).text();
        alert(id);
    }); 

BTW：在{jQuery>的较新版本中不推荐使用live

Answer 4

试试这个

$('#myGrid tbody').delegate('click', 'tr', function() {
    var id = $(this).children('td').eq(0).text();
    alert(id);
});

或

$('body').delegate('click', '#myGrid tbody tr', function() {
    var id = $(this).children('td').eq(0).text();
    alert(id);
}); 

Answer 5

如果动态添加较新的行，则必须对项目使用live方法，将delegate更改为live