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 相关文章推荐
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
html5+javascript制作简易画板附图
Apr 25 Javascript
window.location.reload 刷新使用分析(去对话框)
Nov 11 Javascript
Bootstrap按钮组件详解
Apr 26 Javascript
前端面试题及答案整理(二)
Aug 26 Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 Javascript
vue使用echarts图表的详细方法
Oct 22 Javascript
深入理解react 组件类型及使用场景
Mar 07 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 Javascript
JS实现音量控制拖动
Jan 15 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
isset和empty的区别
2007/01/15 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
基于jQuery实现的当离开页面时出现提示的实现代码
2011/06/27 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
js控制div弹出层实现方法
2015/05/11 Javascript
javaScript中push函数用法实例分析
2015/06/08 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
vue开发调试神器vue-devtools使用详解
2017/07/13 Javascript
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
react学习笔记之state以及setState的使用
2017/12/07 Javascript
微信小程序实现提交input信息到后台的方法示例
2019/01/19 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
[02:19]DOTA2上海特级锦标赛 观赛指南 Spectator Guide
2016/02/04 DOTA
10分钟教你用Python实现微信自动回复功能
2018/11/28 Python
10 行Python 代码实现 AI 目标检测技术【推荐】
2019/06/14 Python
pandas的to_datetime时间转换使用及学习心得
2019/08/11 Python
Python使用Beautiful Soup爬取豆瓣音乐排行榜过程解析
2019/08/15 Python
python中用logging实现日志滚动和过期日志删除功能
2019/08/20 Python
flask/django 动态查询表结构相同表名不同数据的Model实现方法
2019/08/29 Python
Python安装及Pycharm安装使用教程图解
2019/09/20 Python
详解python中docx库的安装过程
2019/11/08 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
2017/07/31 HTML / CSS
劳资员岗位职责
2013/11/11 职场文书
秋季校运动会广播稿
2014/02/23 职场文书
总经理岗位职责说明书
2014/07/30 职场文书
期中考试复习计划
2015/01/19 职场文书
2015幼儿园新学期寄语
2015/02/27 职场文书
城管年度个人总结
2015/02/28 职场文书
2015年中个人总结范文
2015/03/10 职场文书
反邪教观后感
2015/06/11 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书
导游词之广西漓江
2019/11/02 职场文书
一文搞懂php的垃圾回收机制
2021/06/18 PHP
Go gorilla/sessions库安装使用
2022/08/14 Golang