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
Aug 13 Javascript
拖动table标题实现改变td的大小(css+js代码)
Apr 16 Javascript
jquery 清空file域示例(兼容个浏览器)
Oct 11 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
Sep 14 Javascript
浅谈Javascript数组(推荐)
May 17 Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 Javascript
基于vue2.0实现的级联选择器
Jun 09 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
Jun 17 Javascript
javascript中new Array()和var arr=[]用法区别
Dec 01 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
Dec 18 Javascript
基于vue1和vue2获取dom元素的方法
Mar 17 Javascript
vue中进行微博分享的实例讲解
Oct 14 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
星际实力自我测试
2020/03/04 星际争霸
php md5下16位和32位的实现代码
2008/04/09 PHP
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
PHP图片裁剪与缩放示例(无损裁剪图片)
2017/02/08 PHP
为何说PHP引用是个坑,要慎用
2018/04/02 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
2016/11/30 Javascript
原生js编写2048小游戏
2017/03/17 Javascript
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
微信浏览器左上角返回按钮监听的实现
2020/03/04 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
用Python中的__slots__缓存资源以节省内存开销的方法
2015/04/02 Python
python对url格式解析的方法
2015/05/13 Python
python 2.6.6升级到python 2.7.x版本的方法
2016/10/09 Python
Python命令行解析模块详解
2018/02/01 Python
python 字典修改键(key)的几种方法
2018/08/10 Python
Python常见数字运算操作实例小结
2019/03/22 Python
利用Pycharm + Django搭建一个简单Python Web项目的步骤
2020/10/22 Python
浅谈Selenium 控制浏览器的常用方法
2020/12/04 Python
解决pytorch下出现multi-target not supported at的一种可能原因
2021/02/06 Python
canvas简单连线动画的实现代码
2020/02/04 HTML / CSS
英国标志性奢侈品牌:Burberry
2016/07/28 全球购物
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
SmartBuyGlasses德国:购买太阳镜和眼镜
2019/08/20 全球购物
聘用意向书
2014/07/29 职场文书
2014幼儿园教育教学工作总结
2014/12/17 职场文书
环卫工作个人总结
2015/03/04 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python
python 破解加密zip文件的密码
2021/04/22 Python
Golang中interface{}转为数组的操作
2021/04/30 Golang