如何使用 jQuery 将事件附加到动态 HTML 元素？

小编典典

如何使用 jQuery 将事件附加到动态 HTML 元素？

all

假设我有一些 jQuery 代码将事件处理程序附加到所有具有 class 的元素.myclass。

例如：

$(function(){
    $(".myclass").click( function() {
        // do something
    });
});

我的 HTML 可能如下：

<a class="myclass" href="#">test1</a>
<a class="myclass" href="#">test2</a>
<a class="myclass" href="#">test3</a>

这没有问题。但是，请考虑.myclass元素是否在将来某个时间写入页面。

例如：

<a id="anchor1" href="#">create link dynamically</a>
<script type="text/javascript">
$(function(){
    $("#anchor1").click( function() {
        $("#anchor1").append('<a class="myclass" href="#">test4</a>');
    });
});
</script>

在这种情况下，test4链接是在用户单击时创建的a#anchor1。

该test4链接没有click()与之关联的处理程序，即使它具有class="myclass".

基本上，我想编写click()一次处理程序并将其应用于页面加载时存在的内容，以及稍后通过 AJAX / DHTML
引入的内容。知道如何解决这个问题吗？

阅读 90

2022-03-06

共1个答案

小编典典

我正在添加一个新答案以反映以后 jQuery 版本中的更改。自 jQuery 1.7 起，.live() 方法已被弃用。

来自 http://api.jquery.com/live/

从 jQuery 1.7 开始，不推荐使用 .live() 方法。使用 .on() 附加事件处理程序。旧版本 jQuery 的用户应该优先使用
.delegate() 而不是 .live()。

对于 jQuery 1.7+，您可以使用 .on() 将事件处理程序附加到父元素，并将 a 选择器与“myclass”组合作为参数传递。

见 http://api.jquery.com/on/

所以，而不是…

$(".myclass").click( function() {
    // do something
});

你可以写…

$('body').on('click', 'a.myclass', function() {
    // do something
});

这适用于正文中带有“myclass”的所有标签，无论是已经存在还是稍后动态添加。

此处使用 body 标记，因为示例没有更接近的静态环绕标记，但发生 .on 方法调用时存在的任何父标记都将起作用。例如，将添加动态元素的列表的 ul
标记如下所示：

$('ul').on('click', 'li', function() {
    alert( $(this).text() );
});

只要存在 ul 标签，这将起作用（还不需要存在 li 元素）。

2022-03-06