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 相关文章推荐
一直复略了的一个问题,关于表单重复提交
Feb 15 Javascript
Flash+XML滚动新闻代码 无图片 附源码下载
Nov 22 Javascript
jquery模拟按下回车实现代码
Sep 20 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
Jul 09 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
JavaScript+canvas实现七色板效果实例
Feb 18 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
Mar 21 Javascript
JS iFrame加载慢怎么解决
May 13 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
Jul 31 Javascript
vue和iview实现Scroll 数据无限滚动功能
Oct 31 Javascript
JavaScript严格模式不支持八进制的问题讲解
Nov 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
深入理解ob_flush和flush的区别(ob_flush()与flush()使用方法)
2013/02/06 PHP
php抽象类用法实例分析
2015/07/07 PHP
PHP实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
php实现将数据做成json的格式给前端使用
2018/08/21 PHP
laravel 解决ajax异步提交数据,并还回填充表格的问题
2019/10/15 PHP
PHPstorm启用自动换行的方法详解(IDE)
2020/09/17 PHP
Html中JS脚本执行顺序简单举例说明
2010/06/19 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
2010/10/17 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
前端面试题及答案整理(二)
2016/08/26 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
2017/06/01 Javascript
详解使用vue实现tab 切换操作
2017/07/03 Javascript
100行代码实现一个vue分页组功能
2018/11/06 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
JS/CSS实现字符串单词首字母大写功能
2019/09/03 Javascript
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
在Python程序中操作MySQL的基本方法
2015/07/29 Python
浅析Python中的for 循环
2016/06/09 Python
Python实现朴素贝叶斯分类器的方法详解
2018/07/04 Python
python requests 测试代理ip是否生效
2018/07/25 Python
Python csv模块使用方法代码实例
2019/08/29 Python
python conda操作方法
2019/09/11 Python
如何在python中写hive脚本
2019/11/08 Python
使用Tensorflow将自己的数据分割成batch训练实例
2020/01/20 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
英国领先的珍珠首饰品牌:Orchira
2016/09/11 全球购物
佳能德国网上商店:Canon德国
2017/03/18 全球购物
ghd官网:英国ghd直发器品牌
2018/05/04 全球购物
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
工商管理专业实习大学生自我鉴定
2013/09/19 职场文书
同学会主持词
2014/03/18 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
民事答辩状范本
2015/05/21 职场文书
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python