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 相关文章推荐
40款非常棒的jQuery 插件和制作教程(系列二)
Nov 02 Javascript
Jquery性能优化详解
May 15 Javascript
jQuery固定浮动侧边栏实现思路及代码
Sep 28 Javascript
jQuery判断元素上是否绑定了指定事件的方法
Mar 17 Javascript
javascript+canvas实现刮刮卡抽奖效果
Jul 29 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
浅谈Javascript中substr和substring的区别
Sep 30 Javascript
用file标签实现多图文件上传预览
Feb 14 Javascript
Vue2.0实现购物车功能
Jun 05 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
Aug 16 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
layui实现二维码弹窗、并下载到本地的方法
Sep 25 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
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
js Flash插入函数免激活代码
2009/03/31 Javascript
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
2015/08/26 Javascript
jquery实现简单Tab切换菜单效果
2020/07/17 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
2017/06/09 jQuery
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
在vue中解决提示警告 for循环报错的方法
2018/09/28 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
2019/08/26 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
Element Card 卡片的具体使用
2020/07/26 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
2020/08/11 Javascript
Python模仿POST提交HTTP数据及使用Cookie值的方法
2014/11/10 Python
Python的pycurl包用法简介
2015/11/13 Python
python中时间模块的基本使用教程
2019/05/14 Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
2019/07/22 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
python 如何读、写、解析CSV文件
2021/03/03 Python
英国在线房屋中介网站:Yopa
2018/01/09 全球购物
javascript实现用户必须勾选协议实例讲解
2021/03/24 Javascript
客户接待方案
2014/02/26 职场文书
2014年五四青年节活动方案
2014/03/29 职场文书
推荐信怎么写
2014/05/09 职场文书
2014年应急工作总结
2014/12/11 职场文书
铁路安全反思材料
2014/12/24 职场文书
春节晚会开场白
2015/05/29 职场文书
战马观后感
2015/06/08 职场文书
pdf论文中python画的图Type 3 fonts字体不兼容的解决方案
2021/04/24 Python
MySQL官方导出工具mysqlpump的使用
2021/05/21 MySQL
javascript拖曳互换div的位置实现示例
2021/06/28 Javascript
python神经网络 使用Keras构建RNN训练
2022/05/04 Python
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers