javascript - 网格上的 JQuery 委托方法

Question

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

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

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

谁能解释为什么这不起作用：

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

我尝试了选择器的不同组合，但没有一个可以正常工作。

score 15 · Accepted Answer

试试这个：

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

很有可能您的身体上的某些事件被弄乱了和/或您的身体被操纵了。我怀疑整个桌子也会遇到这个问题。

score 4 · Accepted Answer

用这个：

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

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

score 3 · Accepted Answer

在幕后, 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);
    });

顺便说一句：live在较新版本的 jQuery 中已弃用

score 1 · Accepted Answer

试试这个

$('#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);
});

score -4 · Accepted Answer

-4

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

于 2010-03-10T15:56:20.443 回答

5 回答 5