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


Posted in Javascript onJune 16, 2016

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

jQuery 使用on绑定动态生成的元素时,不能直接用该对象操作,而是选择其非动态生成的父节点然后再找到本身才能达到效果。大家看看源码就知道了。生成的按钮基数项on方法点击无效live方法有效。

比如页面上有下边两个元素:

<input type="button" name="addbtn" value="按钮添加" />
<div id="test">
</div>

使用下边的jQuery代码大家可以对比看看区别:

$(function () {
var a = 1,
$_div = $('#test');
$('input[name=addbtn]').on('click', function () {
$_div.append('<input type="button" name="test' + a + '" value="按钮' + a + '"/>');
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()方法绑定动态元素的点击事件的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐base.js
Dec 23 Javascript
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
Aug 19 Javascript
javascript 无提示关闭窗口脚本
Aug 17 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
Mar 25 Javascript
浅谈js的html元素的父节点,子节点
Aug 06 Javascript
MUI  Scroll插件的使用详解
Apr 13 Javascript
JavaScript实现一个空中避难的小游戏
Jun 06 Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 Javascript
JavaScript分步实现一个出生日期的正则表达式
Mar 22 Javascript
vue中动态添加class类名的方法
Sep 05 Javascript
JavaScript中的连续赋值问题实例分析
Jul 12 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
May 11 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
Jun 16 #Javascript
JSON字符串和对象相互转换实例分析
Jun 16 #Javascript
jQuery的层级查找方式分析
Jun 16 #Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
Jun 16 #Javascript
JS中sort函数排序用法实例分析
Jun 16 #Javascript
JS原型对象的创建方法详解
Jun 16 #Javascript
JS使用单链表统计英语单词出现次数
Jun 16 #Javascript
You might like
德生PL330的评价与改造
2021/03/02 无线电
PHP 上传文件大小限制
2009/07/05 PHP
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
PHP中的cookie不用刷新就生效的方法
2012/02/04 PHP
分享php分页的功能模块
2015/06/16 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
一个选择最快的服务器转向代码
2009/04/27 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
2014/05/23 Javascript
jquery的clone方法应用于textarea和select的bug修复
2014/06/26 Javascript
设置点击文本框或图片弹出日历控件的实现代码
2016/05/12 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
2016/08/05 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
AngularJs中$cookies简单用法分析
2019/05/30 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
2021/01/05 Vue.js
详解Python中的正则表达式的用法
2015/04/09 Python
pygame学习笔记(4):声音控制
2015/04/15 Python
在Python中使用HTML模版的教程
2015/04/29 Python
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
Python导入模块时遇到的错误分析
2017/08/30 Python
python实现抖音点赞功能
2019/04/07 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
2012/12/10 HTML / CSS
凯特王妃父母建立的派对用品网站:Party Pieces
2017/05/28 全球购物
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
经济信息系毕业生自荐信范文
2014/03/15 职场文书
教育实习指导教师评语
2014/12/31 职场文书
伏羲庙导游词
2015/02/09 职场文书
信用卡工资证明范本
2015/06/19 职场文书
签字仪式主持词
2015/07/03 职场文书
珍惜时间的诗歌赏析
2019/08/23 职场文书