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 相关文章推荐
一个简单的javascript类定义例子
Sep 12 Javascript
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
JavaScript 动态加载脚本和样式的方法
Apr 13 Javascript
如何检测JavaScript的各种类型
Jul 30 Javascript
Vue.js第二天学习笔记(vue-router)
Dec 01 Javascript
JS实战篇之收缩菜单表单布局
Dec 10 Javascript
node thread.sleep实现示例
Jun 20 Javascript
深入理解JavaScript 箭头函数
May 30 Javascript
vue下使用nginx刷新页面404的问题解决
Aug 02 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 Javascript
快速解决element的autofocus失效问题
Sep 08 Javascript
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
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 Calender(日历)代码分享
2014/01/03 PHP
php过滤html标记属性类用法实例
2014/09/23 PHP
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
php魔术函数__call()用法实例分析
2015/02/13 PHP
php中get_defined_constants函数用法实例分析
2015/05/12 PHP
PHP排序算法类实例
2015/06/17 PHP
浅析Yii2 GridView实现下拉搜索教程
2016/04/22 PHP
php实现简单加入购物车功能
2017/03/07 PHP
javascript 动态table添加colspan\rowspan 参数的方法
2009/07/25 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
JS简单操作select和dropdownlist实例
2014/11/26 Javascript
js获取时间并实现字符串和时间戳之间的转换
2015/01/05 Javascript
完美解决IE9浏览器出现的对象未定义问题
2016/09/29 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
ionic2 tabs使用 Modal底部tab弹出框
2016/12/30 Javascript
利用纯js + transition动画实现移动端web轮播图详解
2017/09/10 Javascript
浅谈Vue组件及组件的注册方法
2018/08/24 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
2018/12/21 Javascript
node.js express捕获全局异常的三种方法实例分析
2019/12/27 Javascript
[44:15]国士无双DOTA2 6.82版本详解(上)
2014/09/28 DOTA
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
[04:14]从西雅图到上海——玩家自制DOTA2主题歌曲应援TI9
2019/07/11 DOTA
Python 加密的实例详解
2017/10/09 Python
python 日志模块 日志等级设置失效的解决方案
2020/05/26 Python
用Python 爬取猫眼电影数据分析《无名之辈》
2020/07/24 Python
德国受欢迎的旅游和休闲网站:lastminute.de
2019/09/23 全球购物
客服主管岗位职责
2013/12/13 职场文书
绩效工资分配方案
2014/01/18 职场文书
模范家庭事迹材料
2014/02/10 职场文书
企业宣传方案
2014/03/04 职场文书
自我评价优缺点范文
2015/03/11 职场文书
逃课检讨书范文
2015/05/06 职场文书
Python实现老照片修复之上色小技巧
2021/10/16 Python
在Docker容器中部署SQL Server
2022/04/11 Servers
vue修饰符.capture和.self的区别
2022/04/22 Vue.js