jquery将事件绑定(bind)到动态加载的html元素

Question

使用 jquery，我们可以将事件处理程序附加到页面中存在的元素，这是在 document.ready() 函数内完成的。现在我的困难是我在下载文档后稍后加载一些元素，例如链接等(使用ajax请求)。因此，这些新元素无法与我在 page.xml 中定义的处理程序绑定(bind)。有什么方法可以知道后续的 ajax 查询何时完成，然后在其中我可以绑定(bind)我的事件处理程序。

提前致谢

Answer 1

各种 ajax 方法接受回调，您可以将处理程序绑定(bind)到新元素。

您还可以将事件委托(delegate)与delegate()^[docs]一起使用方法或 live()^[docs]方法。

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

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

例如:

<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/

因此，您将一个处理程序绑定(bind)到 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
});

所以你可以看到，"a.link"元素何时添加到DOM中并不重要，只要some_container在页面存在时就存在已加载。

live()^[docs]方法是相同的，只是容器是文档，因此它处理页面上的所有点击。

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