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
推荐阅读
-
jQuery live事件的使用详解
-
jQuery文本框(input textare)事件绑定方法教程_jquery
-
easyui-datetimebox 控件绑定双击事件实现自动选中当前日期时间
-
open 动态修改img的onclick事件示例代码_javascript技巧
-
Windows Phone 实用开发技巧(29):动态绑定Pivot
-
使用jQuery给Table动态增加行、清空table的方法
-
Javascript循环绑定事件的示例代码_javascript技巧
-
jQuery:mouseout事件的使用与定义
-
js中DOM事件绑定分析
-
使用JQuery和CSS模拟超链接的用户单击事件的实现代码_jquery