您好,欢迎来到筏尚旅游网。
搜索
您的当前位置:首页jQueryon()方法绑定动态元素的点击事件实例代码浅析

jQueryon()方法绑定动态元素的点击事件实例代码浅析

来源:筏尚旅游网
jQueryon()⽅法绑定动态元素的点击事件实例代码浅析

之前就⼀直受这个问题的困扰,在jQuery1.7版本之后添加了on⽅法,之前就了解过,其优越性⾼于live(),bind(),delegate()等⽅法,在此之前项⽬中想⽤这个来测试结果发现,居然动态⽣成的标签点击了没反应,⽽live⽅法却能够⽀持,于是乎到处查资料,问⽹友,结果找了好久在⼀篇⽂章中终于找到了答案。。。

jQuery 使⽤on绑定动态⽣成的元素时,不能直接⽤该对象操作,⽽是选择其⾮动态⽣成的⽗节点然后再找到本⾝才能达到效果。⼤家看看源码就知道了。⽣成的按钮基数项on⽅法点击⽆效live⽅法有效。⽐如页⾯上有下边两个元素:

使⽤下边的jQuery代码⼤家可以对⽐看看区别:

$(function () {var a = 1,

$_div = $('#test');

$('input[name=addbtn]').on('click', function () {

$_div.append('');a++;});

//偶数项点击事件

$_div.on('click', 'input[name^=test]:even', function () { alert('我是有效的on⽅法,你能看见我吗:' + this.value);});

//奇数项绑定的点击事件 发现点击⽆效,⽽是⽤live⽅法却能够⽀持$('input[name^=test]:odd').on('click', function () { alert('我是⽆效的on⽅法,你不能看见我');});

//奇数项绑定的点击事件 发现点击⽆效,⽽是⽤live⽅法却能够⽀持$('input[name^=test]:odd').live('click', function () {alert('我是live⽅法,你能看见我吗:' + this.value);});});

以上所述是⼩编给⼤家介绍的jQuery on()⽅法绑定动态元素的点击事件的相关知识,希望对⼤家有所帮助,如果⼤家有任何疑问请给我留⾔,⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持!

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- efsc.cn 版权所有 赣ICP备2024042792号-1

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务