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

jquery给动态添加的元素绑定事件(html元素拼接后事件失效)

程序员文章站 2022-06-09 16:41:15
JQuery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定。...

JQuery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定。

在1.7版本以前使用live。但是在1.8版本以后推荐使用on。这里介绍jQuery中如何给动态添加的元素绑定事件;


在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况:例如:<div id="testdiv"><ul></ul></div>,需要给<ul>里面动态添加的<li>标签添加click事件。

jquery 1.7版以前使用live动态绑定事件:

 $("#testdiv ul li").live("click",function(){
 //do something here
 });
jquery 1.7版以后使用on动态绑定事件:
 $("#testdiv ul").on("click","li", function(){
 //do something here
 });
下面这样写就是错误的,一定要把动态添加的元素放到on()方法里面才会触发!
 $("#testdiv ul li").on("click",function(){
 //do something here
 });

绑定的on事件记得写在文档加载后的函数中,$(function () {}); 

以上总结的jquery开发技能希望能帮助到你!

相关标签: jquery