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

Question

假设我有一些 jQuery 代码将事件处理程序附加到类 .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>

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

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

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

Answer 1

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

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

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

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

见 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 元素)。