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

For example:

$(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>

没问题.

For example:

<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引入的内容.你知道我怎么才能解决这个问题吗?

推荐答案

我添加了一个新的答案,以反映较新的jQuery版本中的更改.从jQuery 1.7开始,.live()方法已弃用.

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

从jQuery1.7开始.live()方法已被弃用.使用on()以附加事件处理程序.jQuery旧版本的用户应该使用.委托()优先于.生活().

对于jQuery 1.7+,可以使用将事件处理程序附加到父元素.,并将与"myclass"组合的 Select 器作为参数传递.

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

所以不是...

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

你可以写...

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

这将适用于主体中带有‘myclass’的所有a标记,无论是已经存在的还是稍后动态添加的.

这里使用body标记,因为示例中没有更紧密的静态周围标记,而是当.方法调用发生时将起作用.例如,将添加动态元素的列表的ul标签如下所示:

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

只要ul标记存在,这就会起作用(目前还不需要存在li元素).

Javascript相关问答推荐

在JavaScript中打开和关闭弹出窗口

使用JavaScript重命名对象数组中的键

如何保持子画布元素的1:1宽高比?

可以的.是否可以在不预编译的情况下使用嵌套 Select 器?

对象和数字减法会抵消浏览器js中的数字

是什么原因导致此Angular 16应用程序中类型错误时属性结果不存在?

使用AJX发送表单后,$_Post看起来为空

Phaser框架-将子对象附加到Actor

从PWA中的内部存储读取文件

IMDB使用 puppeteer 加载更多按钮(nodejs)

我开始使用/url?q=使用Cheerio

JSDoc创建并从另一个文件导入类型

无法使用单击按钮时的useState将数据从一个页面传递到另一个页面

以Angular 实现ng-Circle-Progress时出错:模块没有导出的成员

连接到游戏的玩家不会在浏览器在线游戏中呈现

将对象推送到数组会导致复制

背景动画让网站摇摇欲坠

P5JS-绘制不重叠的圆

Chart.js Hover线条在鼠标离开时不会消失

无法使用Redux异步函数读取未定义的useEffect钩子的属性';map';