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 相关文章推荐
jquery显示和隐藏div特效实例
Feb 27 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
Feb 28 Javascript
ES6新特性之函数的扩展实例详解
Apr 01 Javascript
利用jqprint插件打印页面内容的实现方法
Jan 09 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
Sep 14 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
Sep 21 Javascript
angularjs通过过滤器返回超链接的方法
Oct 26 Javascript
搭建基于express框架运行环境的方法步骤
Nov 15 Javascript
Layui点击图片弹框预览的实现方法
Sep 16 Javascript
浅谈Vue.set实际上是什么
Oct 17 Javascript
微信小程序利用button控制条件标签的变量问题
Mar 15 Javascript
使用vant的地域控件追加全部选项
Nov 03 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
重置版战役片段
2020/04/09 魔兽争霸
PHP实例分享判断客户端是否使用代理服务器及其匿名级别
2014/06/04 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
jQuery 使用手册(一)
2009/09/23 Javascript
js鼠标左右键 键盘值小结
2010/06/11 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
javaScript基础语法介绍
2015/02/28 Javascript
JavaScript使用concat连接数组的方法
2015/04/06 Javascript
js如何改变文章的字体大小
2016/01/08 Javascript
AngularJS通过$sce输出html的方法
2016/09/22 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
JavaScript模块模式实例详解
2017/10/25 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
pymongo实现控制mongodb中数字字段做加法的方法
2015/03/26 Python
Python用zip函数同时遍历多个迭代器示例详解
2016/11/14 Python
Python搜索引擎实现原理和方法
2017/11/27 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
python机器学习包mlxtend的安装和配置详解
2019/08/21 Python
python2.7的flask框架之引用js&amp;css等静态文件的实现方法
2019/08/22 Python
python中数据库like模糊查询方式
2020/03/02 Python
python使用OpenCV模块实现图像的融合示例代码
2020/04/10 Python
python 轮询执行某函数的2种方式
2020/05/03 Python
windows支持哪个版本的python
2020/07/03 Python
美国网上眼镜商城:Zenni Optical
2016/11/20 全球购物
绿色美容,有机护肤品和化妆品:Safe & Chic
2018/10/29 全球购物
同步和异步有何异同,在什么情况下分别使用他们?举例说明
2014/02/27 面试题
春节联欢会主持词
2014/03/24 职场文书
党支部公开承诺书
2014/03/28 职场文书
大学学习计划书范文
2014/05/02 职场文书
文明美德伴我成长演讲稿
2014/05/12 职场文书
关于清明节的演讲稿
2014/09/13 职场文书
学校师德师风自我剖析材料
2014/09/29 职场文书
公司晚会主持词
2019/04/17 职场文书