Question

使用jquery我们可以将事件处理程序附加到页面中的元素，这是在document.ready（）函数中完成的。现在我的困难是我在下载文件后有一些元素，比如稍后加载链接等（使用ajax请求）。因此，这些新元素无法与我在页面中定义的处理程序绑定。有没有办法知道什么时候跟着ajax查询完成，然后在里面我可以绑定我的事件处理程序。

提前致谢

Answer 1

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

您还可以使用delegate()^[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()的{{1}}。

当在"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时无关紧要。

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

document

Answer 2

然后你会想要使用.live()。看看http://api.jquery.com/live/。

示例：

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

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

Answer 3

这些答案现在已经过时，因为.live（）方法自jQuery 1.7版以来已被弃用。对于jQuery 1.7+，您可以使用.on（）

将事件处理程序附加到父元素

Answer 4

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

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

4 个答案: