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 ajax提交表单数据的两种方式
Nov 24 Javascript
JavaScript 32位整型无符号操作示例
Dec 08 Javascript
js二维数组排序的简单示例代码
Jan 24 Javascript
JavaScript使用slice函数获取数组部分元素的方法
Apr 06 Javascript
充分发挥Node.js程序性能的一些方法介绍
Jun 23 Javascript
Bootstrap3制作搜索框样式的方法
Jul 11 Javascript
angular双向绑定模拟探索
Dec 26 Javascript
js实现漫天星星效果
Jan 19 Javascript
Bootstrap页面缩小变形的快速解决办法
Feb 03 Javascript
JS函数节流和函数防抖问题分析
Dec 18 Javascript
详解vue 兼容IE报错解决方案
Dec 29 Javascript
微信小程序封装分享与分销功能过程解析
Aug 13 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生成腾讯云COS接口需要的请求签名
2018/05/20 PHP
TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法
2019/06/03 PHP
javascript 写类方式之四
2009/07/05 Javascript
优化javascript的执行速度
2010/01/23 Javascript
利用js 进行输入框自动匹配字符的小例子
2013/06/29 Javascript
JS解决ie6下png透明的方法实例
2013/08/02 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
JavaScript判断变量是否为数组的方法(Array)
2016/02/24 Javascript
拥有一个属于自己的javascript表单验证插件
2016/03/24 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
jQuery EasyUI菜单与按钮详解
2016/07/13 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
JS基于递归实现倒计时效果的方法
2016/11/26 Javascript
Angular中的interceptors拦截器
2017/06/25 Javascript
使用travis-ci如何持续部署node.js应用详解
2017/07/30 Javascript
学习RxJS之JavaScript框架Cycle.js
2019/06/17 Javascript
JS实现拖动模糊框特效
2020/08/25 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
Grid 宫格常用布局的实现
2020/01/10 HTML / CSS
专营店会计助理岗位职责
2013/11/29 职场文书
音乐教学案例
2014/01/30 职场文书
企业军训感言
2014/02/08 职场文书
大学生学习2014全国两会心得体会
2014/03/13 职场文书
《四季》教学反思
2014/04/08 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
文秘班元旦晚会活动策划方案
2014/08/28 职场文书
教师遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
基层工作经验证明样本
2014/11/16 职场文书
2014年共青团工作总结
2014/12/10 职场文书
2015年党员承诺书
2015/01/21 职场文书
药店营业员岗位职责
2015/04/14 职场文书
高中数学教学反思范文
2016/02/18 职场文书
SQL Server 中的事务介绍
2022/05/20 SQL Server