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

【问题标题】：jquery binding events to dynamically loaded html elementsjquery绑定事件到动态加载的html元素
【发布时间】：2011-09-18 00:35:57
【问题描述】：

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

提前致谢

【问题讨论】：

标签： jquery events document ready

【解决方案1】：

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

【讨论】：

【解决方案2】：

各种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()，在这种情况下查找"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
});

【讨论】：

从你所说的来看，使用 delegate() 似乎在执行方面会更快，因为它不会绑定到所有点击。对吗？
@Aaron：如果你的意思是比.live() 更快，我会说是的。传递给 delegate 调用的选择器只需要针对指定容器中发生的事件运行。我从不使用.live()。
.live() 自 1.7 起已被弃用并在 1.9 中被删除，因此请确保您现在使用 .on()！
补充一下 Bashevis 所说的，从 jQuery 3.0 开始，.delegate() 方法也已被弃用，因此，为了迁移到这个版本，我建议切换到 on() 事件为好吧：api.jquery.com/on $('#someAncestorElement').on('.elementThatWillExistLater', 'eventName', function () {...});
糟糕，我在上面的评论中颠倒了选择器和事件的顺序。应该是 $('#someAncestorElement').on('eventName', '.elementsThatWillExistLater', function () {...});

【解决方案3】：

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

示例：

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

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

【讨论】：

仅供参考，现在已弃用 live
live 已弃用，取而代之的是 .on。所以在这个例子中你将使用 $('a').on('click', function() { // 在点击时做一些有用的事情。});

【解决方案4】：

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

【讨论】：