网格上的 JQuery 委托方法答案

【问题标题】：JQuery delegate method on a grid网格上的 JQuery 委托方法
【发布时间】：2010-03-10 15:53:04
【问题描述】：

我正在尝试在使用 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);
    });

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

【问题讨论】：

【解决方案1】：

试试这个：

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

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

【讨论】：

【解决方案2】：

使用这个：

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

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

【讨论】：

这正是delegate 的用途，除了它具有更好的性能，因为需要较少的事件冒泡。
谢谢你们，我避免“直播”，因为我认为该代表应该替换它。我仍然不明白为什么委托对我不起作用，但 live 可以，并且一切都按预期工作。再次感谢您的快速回复！
@Paul 它不起作用，因为您的网格正在被替换。如果您想使用委托，则必须将其附加到被替换的元素之上。在 Alex 的示例中，事件被附加到网格而不是像 live 默认情况下那样的文档......这更有效，因为它意味着更少的气泡，如果该元素作为 AJAX 负载的一部分被吹走，它也无济于事。这就是为什么它在这种情况下不起作用......元素监听不存在。如果您在外部有一个 div id="wrapper"，那么这将起作用：$('#wrapper').delegate('#myGrid tr','click', function() {...
@Alex - 虽然这通常是正确的，但如果您附加到作为 ajax 回调的一部分被替换的元素，它是没用的。无论是具有较窄上下文的.live() 还是.delegate()，都需要在一个未被替换的元素上......因为我不知道这里是什么，.live() 是它工作的特定选项.
除了回答“为什么委托方法不起作用”这个问题之外，这一切都做了——令人困惑的是它被选为答案。委托确实替换现场。它可能会在未来的版本中被弃用。在各个方面都可以更好地使用事件委托。

【解决方案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);
    });

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

【讨论】：

"on" 仅从 1.7 开始可用
"on" 在 iPhone 或 iPad 上不起作用 - 直播也不行。如果您委托确切的元素，则委托有效 - 因此它不适用于 ajax 更新的元素。这真是令人头疼 - 我还没有找到一个很好的解决方法来解决像单击通过 ajax 更新的表中的行这样简单的事情！
我个人在 iphone、ipad 和 androids 2.3 和 4 上使用过 on，它确实有效。有没有可能你没有在这些平台上使用 jQuery？

【解决方案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);
});

【讨论】：

【解决方案5】：

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

【讨论】：