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 从if else 到 switch case 再到抽象
Jul 17 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
Sep 04 Javascript
JavaScrip调试技巧之断点调试
Oct 22 Javascript
javascript设计模式Constructor(构造器)模式
Aug 19 Javascript
微信小程序获取微信运动步数的实例代码
Jul 20 Javascript
详解基于Node.js的HTTP/2 Server实践
May 31 Javascript
详解ECMAScript typeof用法
Jul 25 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 Javascript
Vue+axios封装请求实现前后端分离
Oct 23 Javascript
解决element-ui的下拉框有值却无法选中的情况
Nov 07 Javascript
详解JVM系列之内存模型
Jun 10 Javascript
分享一个vue实现的记事本功能案例
Apr 11 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
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
php里array_work用法实例分析
2015/07/13 PHP
php关联数组与索引数组及其显示方法
2018/03/12 PHP
javascript数字格式化通用类 accounting.js使用
2012/08/24 Javascript
JS如何将UTC格式时间转本地格式
2013/09/04 Javascript
jQuery实现鼠标经过图片预览大图效果
2014/04/10 Javascript
jQuery实现瀑布流布局
2014/12/12 Javascript
js进行表单验证实例分析
2015/02/10 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
2016/05/13 Javascript
AngularJs ng-route路由详解及实例代码
2016/09/14 Javascript
JS实现页面打印功能
2017/03/16 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
Taro集成Redux快速上手的方法示例
2018/06/21 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
2019/02/20 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
2019/03/27 Javascript
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
python读取json文件并将数据插入到mongodb的方法
2015/03/23 Python
简单谈谈Python流程控制语句
2016/12/04 Python
详解如何为eclipse安装合适版本的python插件pydev
2018/11/04 Python
python opencv鼠标事件实现画框圈定目标获取坐标信息
2020/04/18 Python
CSS3动画效果回调处理详解
2014/12/10 HTML / CSS
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
瑰珀翠美国官网:Crabtree & Evelyn美国
2016/11/29 全球购物
JAVA和C++的区别
2013/10/06 面试题
无工作经验者个人求职信范文
2013/12/22 职场文书
物业管理计划书
2014/01/10 职场文书
小区停车场管理制度
2014/01/27 职场文书
优秀党员获奖感言
2014/02/18 职场文书
同居协议书范本
2014/04/23 职场文书
现货白银电话营销话术
2015/05/29 职场文书
2016年小学优秀班主任事迹材料
2016/02/29 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
PHP遍历数组的6种方式总结
2021/11/17 PHP
《仙剑客栈2》第一弹正式宣传片公开 年内发售
2022/04/07 其他游戏