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 相关文章推荐
麦鸡的TAB切换功能结合了javascript和css
Dec 17 Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 Javascript
js中的json对象详细介绍
Oct 29 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
Feb 19 Javascript
简单解析JavaScript中的__proto__属性
May 10 Javascript
省市二级联动小案例讲解
Jul 24 Javascript
js面向对象编程总结
Feb 16 Javascript
VUE实现日历组件功能
Mar 13 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
Mar 23 Javascript
通过JavaScript下载文件到本地的方法(单文件)
Mar 17 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 Javascript
如何使用 vue-cli 创建模板项目
Nov 19 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
SONY ICF-F10中波修复记
2021/03/02 无线电
笑谈配置,使用Smarty技术
2007/01/04 PHP
Apache服务器无法使用的解决方法
2013/05/08 PHP
memcache一致性hash的php实现方法
2015/03/05 PHP
ubuntu下配置nginx+php+mysql详解
2015/09/10 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
JS启动应用程序的一个简单例子
2008/05/11 Javascript
jquery 的 $("#id").html() 无内容的解决方法
2010/06/07 Javascript
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
2013/01/11 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
深入理解javascript中return的作用
2013/12/30 Javascript
点击button获取text内容并改变样式的js实现
2014/09/09 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
2016/04/01 Javascript
JavaScript SHA512加密算法详细代码
2016/10/06 Javascript
微信小程序 地图map详解及简单实例
2017/01/10 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
简述vue状态管理模式之vuex
2018/08/29 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
2019/10/14 Javascript
在Python中操作时间之tzset()方法的使用教程
2015/05/22 Python
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
python画折线图的程序
2018/07/26 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
python实现按首字母分类查找功能
2019/10/31 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
python基于socket模拟实现ssh远程执行命令
2020/12/05 Python
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
大学活动总结格式
2014/04/29 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
社区务虚会发言材料
2014/10/20 职场文书
我的法兰西岁月观后感
2015/06/09 职场文书
利用 JavaScript 构建命令行应用
2021/11/17 Javascript
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python