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

Question

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

提前致谢

Answer 1

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

您还可以将事件委托与 delegate()< support>[docs] 方法或 live()^[docs] 方法。

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

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

例如：

<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
});

因此您可以看到，"a.link" 元素何时添加到 DOM 中并不重要，只要 some_container 在页面加载时存在即可。

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

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

Answer 2

然后您将需要使用.live()。看看 http://api.jquery.com/live/。

示例：

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

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

Answer 3

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

Answer 4

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