处理异步加载的内容时,从性能角度来看,它们之间存在任何差异:
// .live()
$('#mybutton').live('click', function(e){ doSomething(); });
并在每次加载内容后手动bind()我们需要的事件:
// manual bind every time
$.ajax({
url: url,
success: function(data){
mycontainer.html(data); // data contains #mybutton
$('#mybutton').click(function(e){ doSomething(); });
}
});
?
有不同的成本,让我们来看看它们:
$('#mybutton').live('click', function(e){ doSomething(); });
这里有2个主要成本:
- 该
#mybutton
选择器需要立即运行(结果被抛弃,我们只是想要选择器...我们绑定到 document
)。在这种情况下它是一个 #id
选择 所以这是一个非常低的成本......在其他情况下,它并不便宜而且非常浪费(例如 [attr=something]
)。
- 一切
click
泡沫达到 document
现在必须根据此选择器进行检查,每次点击评估费用,这会随着您期望的点击次数而变化。
现在让我们看看另一种方法:
$('#mybutton').click(function(e){ doSomething(); });
这里还有两个主要成本:
- 该
#mybutton
选择器运行,但每个ajax请求只运行一次。但是,我们并没有浪费它,我们正在使用结果。
- 该
click
handler绑定到一个实际的元素,而不是 document
,所以有一个约束成本 每 它运行的时间,而不是一次
但是,没有每次点击成本,选择器调用本身也没有浪费...所以整体上更好, 因为你正在使用ID,在其他情况下不是这样。
在您的情况下,因为您正在处理ID(并保证单个元素), 这要便宜得多:
$('#mybutton').click(function(e){ doSomething(); });
在其他情况下,你绑定数百个元素, .live()
但是,他是明显的赢家 .delegate()
会更好。
可能有点,但我不担心。给我的 .live()
方法看起来更容易维护,所以我会用它。只要没有什么是痛苦的慢,就不必担心JavaScript中的性能。
从成功函数的外观来看,您附加了一个事件,因为该元素现在可以在您的html中使用了吗?是这样吗?
如果是这种情况,那么如果通过点击调用的函数始终相同,那么您可以使用“实时”。 Live允许您绑定到尚不存在的事件。所以你甚至可以在你的document.ready之前把它放进去。然后,当ajax更新主文档时,该事件应始终有效。您不需要每次都分配它。
因此,每次从ajax调用返回时,您都可以获得不必执行某些操作的性能优势,您可以在不依赖document.ready的情况下进行设置,并确保其正常工作。
HTH。