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实现动态改变层大小的方法
May 14 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
Aug 25 Javascript
JS数组排序方法实例分析
Dec 16 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
单行 JS 实现移动端金钱格式的输入规则
May 22 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
React Hooks 实现和由来以及解决的问题详解
Jan 17 Javascript
js 获取扫码枪输入数据的方法
Jun 10 Javascript
JS绘图Flot如何实现可选显示曲线图功能
Oct 16 Javascript
15个值得收藏的JavaScript函数
Sep 15 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
通过php快速统计某个数据库中每张表的数据量
2012/09/04 PHP
preg_match_all使用心得分享
2014/01/31 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
LBS blog sql注射漏洞[All version]-官方已有补丁
2007/08/26 Javascript
js实现页面转发功能示例代码
2013/08/05 Javascript
jQuery实现多按钮单击变色
2014/11/27 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
bootstrap中的 form表单属性role="form"的作用详解
2017/01/20 Javascript
详解Vue 非父子组件通信方法(非Vuex)
2017/05/24 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
Vue组件的使用教程详解
2018/01/05 Javascript
angular1配合gulp和bower的使用教程
2018/01/19 Javascript
Angular6 用户自定义标签开发的实现方法
2019/01/08 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
2019/08/27 jQuery
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26
2018/08/30 DOTA
python使用xmlrpc实例讲解
2013/12/17 Python
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
python Tensor和Array对比分析
2020/01/08 Python
详解css3中 text-fill-color属性
2019/07/08 HTML / CSS
英格兰足协官方商店:England Store
2019/07/12 全球购物
优秀导游先进事迹材料
2014/01/25 职场文书
公司成本主管岗位责任制
2014/02/21 职场文书
银行柜员求职自荐书
2014/06/18 职场文书
工会趣味活动方案
2014/08/18 职场文书
职工小家建设活动方案
2014/08/25 职场文书
改进工作作风心得体会
2016/01/23 职场文书
总结Python常用的魔法方法
2021/05/25 Python
Win11电源已接通但未充电怎么办?Win11电源已接通未充电的解决方法
2022/04/05 数码科技