Question

当处理异步加载的内容时，与性能观点之间存在任何差异：

// .live()
$('#mybutton').live('click', function(e){ doSomething(); });

并在每次加载内容后手动绑定（）我们需要的事件：

// manual bind every time
$.ajax({
    url: url,
    success: function(data){
        mycontainer.html(data); // data contains #mybutton
        $('#mybutton').click(function(e){ doSomething(); });  
    }
});

Answer 1

有不同的成本，让我们来看看它们：

$('#mybutton').live('click', function(e){ doSomething(); });

这里有两个主要成本：

#mybutton选择器需要立即运行（结果被丢弃，我们只是想要选择器......我们绑定到document）。在这种情况下，它是#id selector，因此成本非常低......在其他情况下，它并不便宜且非常浪费（例如[attr=something]）。
现在必须针对此选择器检查每个click气泡到document，每次点击评估费用，这会随着您期望的点击次数而变化。

现在让我们看看另一种方法：

$('#mybutton').click(function(e){ doSomething(); });

这里还有两个主要成本：

#mybutton选择器运行，但每个ajax请求只运行一次。但是，我们并没有浪费它，我们正在使用结果。
click处理程序绑定到一个实际元素，而不是document，因此运行时每个的绑定成本，而不是一次

然而，没有每次点击费用，选择器调用本身也没有浪费...所以总体上更好，因为你使用的是ID ，在其他情况下不是这样。例。

在您的情况下，由于您正在处理ID（并保证单个元素），这样便宜得多：

$('#mybutton').click(function(e){ doSomething(); });

在其他情况下，如果你绑定了数百个元素，.live()是明显的赢家，尽管.delegate()会更好。

Answer 2

可能有点，但我不担心。对我来说，.live()方法看起来更容易维护，所以我会使用它。只要没有任何事情变得非常缓慢，就不必担心JavaScript中的性能。

Answer 3

从成功函数的外观来看，您附加了一个事件，因为该元素现在可以在您的html中使用了吗？是这样吗？

如果是这种情况，那么如果通过点击调用的函数始终相同，那么您可以使用'live'。 Live允许您绑定到尚不存在的事件。所以你甚至可以在你的document.ready之前把它放进去。然后，当ajax更新主文档时，该事件应始终有效。您不需要每次都分配它。

因此，每次从ajax调用返回时，您都可以获得不必执行某些操作的性能优势，您可以在不依赖document.ready的情况下进行设置，并确保其正常工作。

HTH。

jQuery性能：$（'＃selector'）。live（）vs手动绑定（当使用ajax请求时）

3 个答案: