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

Question

假设我有一些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
引入的内容。知道我该如何解决吗？

Answer 1

我正在添加一个新答案，以反映jQuery更高版本中的更改。从jQuery 1.7开始不推荐使用.live（）方法。

从http://api.jquery.com/live/

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

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

所以代替…

$(".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元素）。