Question

我使用AJAX更新容器。哪一个在性能方面更好？伪代码：

$.post('get_something.php',function(data){
    $('#container').html(data).find('a').bind('click',function(){
        console.log('Doh!');
    });
});

还是这个？

$('#container a').live('click',function(){
    console.log('Doh!');
});

$.post('get_something.php',function(data){
    $('#container').html(data);
});

Answer 1

首先，我建议不要使用live（并且jQuery团队已弃用它）。我会使用delegate（或新版本的on）与更具针对性的容器（在您的情况下为#container），而不是整个文档。

如果你这样做，点击时的表现将如此接近，以至于没有任何区别（我们在这里处理用户生成的事件，奇怪的额外几毫秒不会没关系）。

但是，[um]还有其他考虑因素。假设我们有这个标记：

<div id="container">
    <div id="wrapper">
        <a>A link</a>
    </div>
</div>

...而且这段代码：

$("#container").delegate('a', 'click', function() {
    // Do something with the click
    console.log("Link was clicked");
});
$("#wrapper").click(function() {
    return false;
});

由于a是最深的元素，因此您希望第一个处理程序处理a上的点击并查看console.log条目。但是你不会，因为在它到达容器之前实际上并没有处理它 - 在这种情况下，它不会到达容器，因为它们之间的包装元素会停止事件。

这不是消极的（我发现delegate非常有用并且一直使用它），当你设计处理事物时，这只是需要考虑的事情。

Answer 2

在这两个中，第一个选项。但是，比delegate()

更好

$("#container").delegate(".filter", "click", function() {
    // do something on click of .filter element.
});

Answer 3

FYI声明

“毕竟，绑定看起来更清晰，更直接，不是吗？好吧，有两个原因我们更喜欢委托或活着绑定：

将处理程序附加到DOM中可能尚不存在的DOM元素。因为bind直接将处理程序绑定到各个元素，所以它不能将它们绑定到页面上没有的元素。如果你是运行$（'a'）。bind（...），然后在页面中添加新链接通过AJAX，你的绑定处理程序不适用于这些。生活和另一方面委托绑定到另一个祖先节点，所以它将适用于现在或将来存在的任何元素祖先元素。
或者将处理程序附加到单个元素或小组元素，听取后代元素上的事件，而不是循环并将相同的功能附加到100个人 DOM中的元素。这将是性能优势将处理程序附加到一个（或一小组）祖先元素而不是直接将处理程序附加到页面上的所有元素。 “

answer source

哪个更好，刷新后绑定或live（）（jQuery）？

3 个答案: