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

参见英文答案 > Event binding on dynamically created elements?                                    23个
假设我有一些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>

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

test4链接没有与之关联的click()处理程序,即使它有class =“myclass”.

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

解决方法:

我正在添加一个新的答案,以反映后来的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元素).

标签：dhtml,javascript,jquery,events
来源： https://codeday.me/bug/20190910/1802157.html