javascript - 如何绑定(bind)对使用 AJAX 加载的新数据的点击？ -- 查询

Question

我有一堆带有加载更多的“显示更多”Ajax 请求的链接:

<a href="#" class="item">abc</a>
<a href="#" class="item">abc</a>
<a href="#" class="item">abc</a>

我有一个绑定(bind)函数 this 可以做一些事情:

$('.item').click(function(e) {
  // some stuff
});

问题是当我使用 Ajax 加载更多这些链接时，单击它们不会转到此功能!

我怎样才能“重新绑定(bind)”所有链接以使新链接也能正常工作？

Answer 1

您可以使用 live()或 delegate()如果您使用 jQuery < 1.7

则绑定(bind)处理程序

$('.item').live('click', function(e) {
  // some stuff
});

$('body')delegate('.item', 'click', function(){

});

如果你使用 jQuery > 1.7，你应该使用 on()但是您必须将事件处理程序附加到您委托(delegate)事件处理的元素，并且当您附加处理程序时该元素必须存在于 DOM 中。
因此，如果您的链接有一个容器，您应该使用它，否则您可以使用 body 元素。

<div id='container'>
<a href="#" class="item">abc</a>
<a href="#" class="item">abc</a>
<a href="#" class="item">abc</a>
</div>

$("#container").on("click",".item",  function(event){

});

或者如果没有容器(它有更大的开销)

$("body").on("click",".item",  function(event){

});