jQuery unbind()方法实例详解


Posted in Javascript onJanuary 19, 2016

本文实例讲述了jQuery unbind()方法使用方法。分享给大家供大家参考,具体如下:

jQuery 中的 unbind() 方法是 bind() 方法的反向操作,从每一个匹配的元素中删除绑定的事件。

语法结构:

unbind([type][, data]);

type是事件类型,data为将要移除的事件。具体说明如下:
1、如果没有参数,则删除所有的绑定事件;
2、如果提供了事件类型(type)作为参数,则只删除该类型的绑定事件;
3、如果把在绑定时传递的处理函数作为第2个参数,则只有这个特定的事件处理函数被删除。

请看下面的举例:

<script src="jquery.js" type="text/javascript"></script>
<style>
.info {
  background:#ffff66;
}
</style>
<input type="button" id="btn" value="点击我" />
<input type="button" id="delAll" value="删除全部绑定函数" />
<input type="button" id="delFun2" value="删除第二个绑定函数" /><br />
<div class="info"></div>
<script type="text/javascript">
$(document).ready(function(){
  // 为id为btn的按钮添加绑定事件
  $("#btn").bind('click', fun1=function(){
    $(".info").append('<p>绑定函数1</p>');
  }).bind('click', fun2=function(){
    $(".info").append('<p>绑定函数2</p>');
  }).bind('click', fun3=function(){
    $(".info").append('<p>绑定函数3</p>');
  })
  $("#delAll").bind('click', function(){
    $("#btn").unbind(); //删除全部绑定事件
  })
  $("#delFun2").bind('click', function(){
    $("#btn").unbind('click', fun2); //删除第二个绑定函数
  })
})
</script>

效果展示图:

jQuery unbind()方法实例详解

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JS 无法通过W3C验证的处理方法
Mar 09 Javascript
Jquery替换已存在于element上的event的方法
Mar 09 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
Aug 25 Javascript
潜说js对象和数组
May 25 Javascript
JavaScript String.replace函数参数实例说明
Jun 06 Javascript
jquery与js函数冲突的两种解决方法
Sep 09 Javascript
JS 对象属性相关(检查属性、枚举属性等)
Apr 05 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
Dec 26 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
Aug 29 Javascript
vue使用video.js进行视频播放功能
Jul 18 Javascript
js面向对象编程OOP及函数式编程FP区别
Jul 07 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
Jan 19 #Javascript
详解JavaScript对象序列化
Jan 19 #Javascript
学习JavaScript设计模式之单例模式
Jan 19 #Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 #Javascript
学习JavaScript设计模式之装饰者模式
Jan 19 #Javascript
jQuery事件绑定用法详解(附bind和live的区别)
Jan 19 #Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
Jan 19 #Javascript
You might like
利用谷歌 Translate API制作自己的翻译脚本
2014/06/04 PHP
php常用数学函数汇总
2014/11/21 PHP
php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法
2016/10/12 PHP
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
css transform 3D幻灯片特效实现步骤解读
2013/03/27 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
Css3制作变形与动画效果
2015/07/24 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
JavaScript实现的select点菜功能示例
2017/01/16 Javascript
微信小程序中使用wxss加载图片并实现动画效果
2018/08/13 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
Puppet的一些技巧
2018/09/17 Javascript
Vue实现简单分页器
2018/12/29 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
跟老齐学Python之私有函数和专有方法
2014/10/24 Python
python文件与目录操作实例详解
2016/02/22 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
python实现Zabbix-API监控
2018/09/17 Python
Numpy截取指定范围内的数据方法
2018/11/14 Python
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
详解python中的三种命令行模块(sys.argv,argparse,click)
2020/12/15 Python
AE美国鹰美国官方网站:American Eagle Outfitters
2016/08/22 全球购物
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
俄罗斯运动、健康和美容产品在线商店:Lactomin.ru
2020/07/23 全球购物
护理毕业生自荐信范文
2013/12/22 职场文书
我未来的职业规划范文
2014/01/11 职场文书
导游欢迎词范文
2015/01/23 职场文书
出国留学自荐信模板
2015/03/06 职场文书
党员转正申请报告
2015/05/15 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书