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 类似flash效果的立体图片浏览器
Feb 08 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
Oct 16 Javascript
JS代码放在head和body中的区别分析
Dec 01 Javascript
JavaScript词法作用域与调用对象深入理解
Nov 29 Javascript
JS 实现导航栏悬停效果
Sep 23 Javascript
jquery幻灯片插件bxslider样式改进实例
Oct 15 Javascript
Javascript数组与字典用法分析
Dec 13 Javascript
详解Angular2组件之间如何通信
Jun 22 Javascript
vue addRoutes实现动态权限路由菜单的示例
May 15 Javascript
jQuery超简单遮罩层实现方法示例
Sep 06 jQuery
js滚轮事件 js自定义滚动条的实现
Jan 18 Javascript
vue中的可拖拽宽度div的实现示例
Apr 08 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
这部好评如潮的动漫 知名梗频出 但是画风劝退很多人
2020/03/08 日漫
探讨PHP JSON中文乱码的解决方法详解
2013/06/06 PHP
YII Framework框架教程之缓存用法详解
2016/03/14 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
javascript面向对象编程代码
2011/12/19 Javascript
原始的js代码和jquery对比体会
2013/09/10 Javascript
JavaScript返回0-1之间随机数的方法
2015/04/06 Javascript
javascript实现点击后变换按钮显示文字的方法
2015/05/13 Javascript
JavaScript实现LI列表数据绑定的方法
2015/08/04 Javascript
JavaScript检测原始值、引用值、属性
2016/06/20 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
用Vue.js实现监听属性的变化
2016/11/17 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
2017/09/14 Javascript
javascript+html5+css3自定义弹出窗口效果
2017/10/26 Javascript
[15:07]lgd_OG_m2_BP
2019/09/10 DOTA
[01:32:22]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第一场 2月5日
2021/03/11 DOTA
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
python实现复制整个目录的方法
2015/05/12 Python
详细解析Python中的变量的数据类型
2015/05/13 Python
python生成验证码图片代码分享
2016/01/28 Python
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
Skyscanner香港:机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
软件缺陷的分类都有哪些
2014/08/22 面试题
出纳的岗位职责
2013/11/09 职场文书
yy司仪主持词
2014/03/22 职场文书
学校教师安全责任书
2014/07/23 职场文书
安全生产标语大全
2014/10/06 职场文书
英文感谢信格式
2015/01/21 职场文书
公司介绍信范文
2015/01/31 职场文书
2015年物流客服工作总结
2015/07/27 职场文书
初中班干部工作总结
2015/08/10 职场文书