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 相关文章推荐
JSON 学习之完全手册 图文
May 29 Javascript
Mootools 1.2教程(21)——类(二)
Sep 15 Javascript
通过javascript把图片转化为字符画
Oct 24 Javascript
文档对象模型DOM通俗讲解
Nov 01 Javascript
js实现九宫格图片半透明渐显特效的方法
Feb 16 Javascript
jQuery中slideUp 和 slideDown 的点击事件
Feb 26 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
jquery实现列表上下移动功能
Feb 25 Javascript
vue的一个分页组件的示例代码
Dec 25 Javascript
angularjs 动态从后台获取下拉框的值方法
Aug 13 Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 Javascript
javascript贪吃蛇游戏设计与实现
Sep 17 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
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
php实现记事本案例
2020/10/20 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
Prototype源码浅析 String部分(二)
2012/01/16 Javascript
js 自定义个性下拉选择框示例
2013/08/20 Javascript
浅谈 jQuery 事件源码定位问题
2014/06/18 Javascript
多个jQuery版本共存的处理方案
2015/03/17 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
jQuery与JS加载事件用法分析
2016/09/04 Javascript
浅谈js的异步执行
2016/10/18 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
2016/11/09 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
关于js中的鼠标事件总结
2017/07/11 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
2019/09/09 Javascript
Python中的sort()方法使用基础教程
2017/01/08 Python
python互斥锁、加锁、同步机制、异步通信知识总结
2018/02/11 Python
使用pandas对矢量化数据进行替换处理的方法
2018/04/11 Python
Python中pandas模块DataFrame创建方法示例
2018/06/20 Python
jupyter notebook 中输出pyecharts图实例
2020/04/23 Python
python画图的函数用法以及技巧
2019/06/28 Python
Python 堆叠柱状图绘制方法
2019/07/29 Python
PyTorch中的padding(边缘填充)操作方式
2020/01/03 Python
Keras官方中文文档:性能评估Metrices详解
2020/06/15 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
python爬虫筛选工作实例讲解
2020/11/23 Python
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
应届生新闻编辑求职信
2013/11/19 职场文书
自主招生自荐信范文
2013/12/04 职场文书
物流管理专业毕业生自荐信
2014/03/04 职场文书
小学节能减排倡议书
2014/05/15 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
民政局办理协议离婚(范本)
2014/10/25 职场文书
JS不要再到处使用绝对等于运算符了
2021/04/30 Javascript