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 相关文章推荐
一个很简单的办法实现TD的加亮效果.
Jun 29 Javascript
IE8 中使用加速器(Activities)
May 14 Javascript
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
jquery实现的一个简单进度条效果实例
May 12 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
Aug 27 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 Javascript
JavaScript实现跟随滚动缓冲运动广告框
Jul 15 Javascript
基于webpack.config.js 参数详解
Mar 20 Javascript
如何用JavaScript实现功能齐全的单链表详解
Feb 11 Javascript
vue过滤器实现日期格式化的案例分析
Jul 02 Javascript
Nest.js环境变量配置与序列化详解
Feb 21 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 has encountered an Access Violation
2007/01/15 PHP
php上传图片存入数据库示例分享
2014/03/11 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
2015/11/25 Javascript
JavaScript 数组中最大最小值
2016/06/05 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
windows下vue.js开发环境搭建教程
2017/03/20 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
jQuery接受后台传递的List的实例详解
2017/08/02 jQuery
js数组实现权重概率分配
2017/09/12 Javascript
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
2018/01/13 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
如何自动化部署项目?折腾服务器之旅~
2019/04/16 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
2019/05/04 jQuery
webpack常用构建优化策略小结
2019/11/21 Javascript
js正则匹配多个全部数据问题
2019/12/20 Javascript
js实现上下左右键盘控制div移动
2020/01/16 Javascript
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
[00:57]深扒TI7聊天轮盘语音出处5
2017/05/11 DOTA
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
简单介绍Ruby中的CGI编程
2015/04/10 Python
在Heroku云平台上部署Python的Django框架的教程
2015/04/20 Python
Python简易版停车管理系统
2019/08/12 Python
Python中字典与恒等运算符的用法分析
2019/08/22 Python
window7下的python2.7版本和python3.5版本的opencv-python安装过程
2019/10/24 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
HTML5中的音频和视频媒体播放元素小结
2016/01/29 HTML / CSS
eHarmony英国:全球领先的认真恋爱约会平台之一
2020/11/16 全球购物
酒店前台接待岗位职责
2013/12/03 职场文书
人力管理专业毕业生求职信
2014/02/27 职场文书
工程质量承诺书范文
2014/03/27 职场文书
慰问敬老院活动总结
2014/04/26 职场文书
工作检讨书怎么写
2014/10/10 职场文书