欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jQuery 动态绑定事件

程序员文章站 2022-06-08 18:38:03
...

今天发现的一个坑——jQuery 动态绑定事件

动态添加的元素竟然无法执行响应事件

代码如下:

var t = $(".myTable>tbody");
channel = channel + '<td class="my_td"><span class="my_content" title="通道1">通道1</span><i class="fa fa-edit my_edit"></i></td>';
 t.append(collect);
$(".my_edit").on("click",function () {
		alert("执行绑定事件....");
}

核心的代码就这几行,意思是动态的添加了一行数据,后面 my_edit再绑定点击事件,可动态添加了之后,点击竟然没效果;刚开始我以为漏掉了什么,仔细检查发现又没写错。然后,发现:这样做是不对滴,要改成如下样子

$("body").on("click",".my_edit",function () {
		alert("执行绑定事件....");
}

简单来说就是通过代理来实现,这里 body 可以替换成任何父类元素,对了还有就是因为 jQuery 版本问题,一些老的版本好像是 live 而不是 on