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遍历Table应用示例
Apr 09 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
May 05 Javascript
Jquery对象和Dom对象的区别分析
Nov 20 Javascript
jQuery实现简洁的导航菜单效果
Nov 23 Javascript
js改变透明度实现轮播图的算法
Aug 24 Javascript
详解Vue 开发模式下跨域问题
Jun 06 Javascript
js推箱子小游戏步骤代码解析
Jan 10 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 Javascript
Vue-Cli项目优化操作的实现
Oct 27 Javascript
JS实现横向轮播图(初级版)
Jun 24 Javascript
阿望教你用vue写扫雷小游戏
Jan 20 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
Aug 18 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
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
PHP中创建图像并绘制文字的例子
2014/11/19 PHP
PHP生成唯一订单号
2015/07/05 PHP
php计算给定日期所在周的开始日期和结束日期示例
2017/02/06 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
写自已的js类库需要的核心代码
2012/07/16 Javascript
javascript 保存文件到本地实现方法
2012/11/29 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
2014/06/24 Javascript
jQuery中focus事件用法实例
2014/12/26 Javascript
nodejs中使用多线程编程的方法实例
2015/03/24 NodeJs
JavaScript_ECMA5数组新特性详解
2016/06/12 Javascript
JavaScript数据类型转换的注意事项
2016/07/31 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
全面解析node 表单的图片上传
2016/11/21 Javascript
原生JS实现几个常用DOM操作API实例
2017/01/19 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
原生JS封装_new函数实现new关键字的功能
2018/08/12 Javascript
[02:20]DOTA2亚洲邀请赛 IG战队出场宣传片
2015/02/07 DOTA
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python实现封装得到virustotal扫描结果
2014/10/05 Python
Python生成8位随机字符串的方法分析
2017/12/05 Python
通过PYTHON来实现图像分割详解
2019/06/26 Python
CSS3绘制不规则图形的一些方法示例
2015/11/07 HTML / CSS
Canvas获取视频第一帧缩略图的实现
2020/11/11 HTML / CSS
Paul’s Boutique官网:英国时尚手袋品牌
2018/03/31 全球购物
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
迪士尼英国官方商店:shopDisney UK
2019/09/21 全球购物
Armor Lux法国官方网站:水手服装、成衣和内衣
2020/05/26 全球购物
县优秀教师事迹材料
2014/01/31 职场文书
2014年清明节寄语
2014/04/03 职场文书
管理失职检讨书
2015/05/05 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书
好人好事新闻稿
2015/07/17 职场文书
《全神贯注》教学反思
2016/02/22 职场文书