jQuery绑定事件到动态加载的HTML元素

Question

使用jQuery，我们可以将事件处理程序附加到页面中的元素，这是在document.ready()函数中完成的。现在我的困难是，我有一些元素（如链接等）稍后加载（使用ajax请求）后才下载文档。所以那些新元素无法绑定到我在页面中定义的处理程序上。是否有任何方法可以知道跟随的ajax查询何时完成，然后在其中绑定我的事件处理程序。

提前感谢。

- ahhishek

Answer 1

各种ajax方法都接受一个回调函数，您可以在其中绑定处理程序以处理新元素。

您还可以使用事件委托和delegate()方法或live()方法。

事件委托的概念是，您不将处理程序绑定到元素本身，而是绑定到页面加载时存在的某个父容器。

事件从容器内的元素冒泡，在达到容器时，会运行选择器以查看接收事件的元素是否应调用处理程序。

例如：

<div id="some_container"> <!-- this is present when the page loads -->

    <a class="link">some button</a>  <!-- this is present when the page loads -->
    <a class="link">some button</a>  <!-- this is present when the page loads -->
    <a class="link">some button</a>  <!-- this is present when the page loads -->


    <a class="link">some button</a>  <!-- this one is dynamic -->
    <a class="link">some button</a>  <!-- this one is dynamic -->
    <a class="link">some button</a>  <!-- this one is dynamic -->

    <span>some text</span>  <!-- this one won't match the selector -->
    <span>some text</span>  <!-- this one won't match the selector -->

</div>

实例: http://jsfiddle.net/5jKzB/

你可以将一个处理程序绑定到some_container上，并在.delegate()中传递一个选择器，这里选择器是"a.link"。

当在some_container内点击符合该选择器的元素时，处理程序将被调用。

$('#some_container').delegate('a.link', 'click', function() {
    // runs your code when an "a.link" inside of "some_container" is clicked
});

所以你可以看到，只要在页面加载时存在some_container，就不管何时将"a.link"元素添加到DOM中都没有关系。 live()^[文档]方法是相同的，只是容器是document，因此它处理页面上的所有点击事件。

$('a.link').live('click',function() {
    // runs your code when any "a.link" is clicked
});

- user113716

---

从你所说的来看，使用delegate()在执行方面似乎会更快，因为它不会绑定所有的点击事件。这是正确的吗？ - Aaron

@Aaron：如果你的意思是比.live()更快，那我可以肯定地说是的。传递给你的delegate调用的选择器只需要在指定容器中发生事件时运行。我从来不使用.live()。 - user113716

是的，那就是我想表达的意思。谢谢，我一直在使用live()方法，但直到现在才了解delegate()方法及其优点。 - Aaron

.live()自1.7版本起已被弃用，并在1.9版本中删除，因此请确保现在使用.on()！ - Bashevis

补充Bashevis所说的，.delegate()方法自jQuery 3.0版本起也已被弃用，因此为了迁移到该版本，我建议您也切换到on()事件：http://api.jquery.com/on/$('#someAncestorElement').on('.elementThatWillExistLater', 'eventName', function () {...}); - Michael Tontchev

糟糕，我在上面的评论中颠倒了选择器和事件的顺序。应该是：$('#someAncestorElement').on('eventName', '.elementsThatWillExistLater', function () {...}); - Michael Tontchev

Answer 2

如果您需要使用实时绑定事件，则需要使用 .live()。请参考http://api.jquery.com/live/。

示例：

$('a').live('click', function() {
  // Do something useful on click.
});

在上面的示例中，任何A元素无论是已经存在的还是在文档加载后加载的，都将触发单击事件。

- Francois Deschenes

---

只是提醒一下，live s现在已经被弃用了。 - user844866

.live已被.on取代。因此，在这个例子中，您将使用$('a').on('click', function() { // 在单击时执行一些有用的操作。 }); - lloydphillips

Answer 3

自从jQuery 1.7版本起，.live()方法已被弃用，因此这些答案现在已经过时。对于jQuery 1.7+，您可以使用.on()将事件处理程序附加到父元素。

- Ronald De Ruiter

Answer 4

使用.live()将它们绑定。即使选择器在页面上不存在，它也会将事件处理程序附加到与选择器匹配的任何元素上。

- Jason Miesionczek