jQuery中对未来的元素绑定事件用bind、live or on


Posted in Javascript onApril 17, 2014

对未来的元素绑定事件不能用bind,

1、可以用live代替,但是要注意jquery的版本,根据官方文档,从1.7开始就不推荐live和delegate了,1.9里就去掉live了。

2、推荐用on代替(注:1.7及以上的版本才支持)。用法:on(events,[selector],[data],fn)

//放在$(function(){})里才有效 
$(document).on("click", "#testDiv", function(){ 
//此处的$(this)指$( "#testDiv"),而非$(document) 
});

3、 当只想为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数时,用.one()代替on就可以了,注意不是在所有的[selector]上都可以执行一次,而是在这些[select]上总共也就执行一次,对未来的元素也有效。

4、如果某个div里有增删改三个按钮需要绑定事件,像下面这些写:

$('#btn-add').click(function(){}); 
$('#btn-del').click(function(){}); 
$('#btn-edit').click(function(){});

这样写的坏处:看不出三者的结构联系,没有理由事件冒泡。

看看CoffeeDeveloper的对jQuery的事件绑定的一些思考 推荐的方法吧,可以写成这样:

$("#btnContainer").coffee({ 
click: { 
"#btn-add": function(){ //do something }, 
"#btn-del": function(){ //do something }, 
"#btn-edit": function(){ //do something } 
} , 
mouseenter:{ 
"#btn-abc": function(){ //do something }, 
} 
});

这样写是不是好看多了,(.coffee()是自定义的函数,你能自己写出这个函数吗?),只是如果绑定的function比较长的话,感觉代码看起来还是有点乱,评论中的
$('#btnContainer') 
.on('click','#btn-add', function(){}) 
.on('click','#btn-del', function(){}) 
.on('click','#btn-edit',function(){});

这种写法也避免了上文提到的两个坏处,看起来也不乱了。
Javascript 相关文章推荐
基于jquery循环map功能的代码
Feb 26 Javascript
html中table数据排序的js代码
Aug 09 Javascript
禁用JavaScript控制台调试的方法
Mar 07 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
Feb 02 Javascript
jQuery中 attr() 方法使用小结
May 03 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
Jan 08 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
详解关于vue-area-linkage走过的坑
Jun 27 Javascript
微信小程序云函数使用mysql数据库过程详解
Aug 07 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
js获取url页面id,也就是最后的数字文件名
Sep 25 Javascript
JS时间戳与日期格式互相转换的简单方法示例
Jan 30 Javascript
jQuery模拟点击A标记示例参考
Apr 17 #Javascript
javascript闭包传参和事件的循环绑定示例探讨
Apr 17 #Javascript
window.location不跳转的问题解决方法
Apr 17 #Javascript
JavaScript避免代码的重复执行经验技巧分享
Apr 17 #Javascript
js中的cookie的读写操作示例详解
Apr 17 #Javascript
巧用replace将文字表情替换为图片
Apr 17 #Javascript
JavaScript事件委托的技术原理探讨示例
Apr 17 #Javascript
You might like
PHP第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
ThinkPHP中I(),U(),$this->post()等函数用法
2014/11/22 PHP
php实现产品加入购物车功能(1)
2020/07/23 PHP
php+js实现裁剪任意形状图片
2018/10/31 PHP
PHP文件后缀不强制为.php方法
2019/03/31 PHP
Yii2框架自定义类统一处理url操作示例
2019/05/25 PHP
一个对于js this关键字的问题
2007/01/09 Javascript
仿新浪微博登陆邮箱提示效果的js代码
2013/08/02 Javascript
replace()方法查找字符使用示例
2013/10/28 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
2016/06/26 Javascript
BootStrap Typeahead自动补全插件实例代码
2016/08/10 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
2016/08/23 Javascript
JS匿名函数类生成方式实例分析
2016/11/26 Javascript
jQuery插件echarts去掉垂直网格线用法示例
2017/03/03 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
2018/06/10 Javascript
判断js数据类型的函数实例详解
2019/05/23 Javascript
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
一起写一个即插即用的Vue Loading插件实现
2019/10/31 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
在Python编程过程中用单元测试法调试代码的介绍
2015/04/02 Python
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
PYQT5开启多个线程和窗口,多线程与多窗口的交互实例
2019/12/13 Python
Python常用类型转换实现代码实例
2020/07/28 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
Hotter Shoes美国官网:英国最受欢迎的舒适鞋
2018/08/02 全球购物
通信研究生自荐信
2014/02/01 职场文书
党支部换届选举方案
2014/05/08 职场文书
多线程Spring通过@Scheduled实现定时任务
2022/05/25 Java/Android