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

JavaScript

樱小胖Mandy

2020-03-12

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

第1075篇《如何使用jQuery将事件附加到动态HTML元素?\[重复\]》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

3个回答
老丝猿Near 2020.03.12

如果您使用的是jQuery 1.3+,请使用。生活()

将所有当前-和将来-匹配元素的处理程序绑定到事件(例如click)。也可以绑定自定义事件。

老丝村村 2020.03.12

将所有当前-和将来-匹配元素的处理程序绑定到事件(例如click)。也可以绑定自定义事件。

连结文字

$(function(){
    $(".myclass").live("click", function() {
        // do something
    });
});
猴子小小Tony 2020.03.12

在jQuery 1.7之后,首选方法是.on().off ()

肖恩的答案显示了一个例子。

现在不推荐使用:

使用jQuery函数.live().die()在jQuery 1.3.x中可用

从文档:

若要在单击时在警告框中显示每个段落的文本:

$("p").live("click", function(){
  alert( $(this).text() );
});

另外,livequery插件可以做到这一点,并支持更多事件。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android