jQuery 移除事件
在绑定事件的过程中，不仅可以为同一个元素绑定多个事件，也可以为多个元素绑定同一个事件。假设网页上有一个<button>元素，使用以下代码为该元素绑定多个相同的事件。
<script type="text/javascript">
$(function(){
$('#btn').bind("click", function(){
$('#test').append("<p>我的绑定函数1</p>");
}).bind("click", function(){
$('#test').append("<p>我的绑定函数2</p>");
}).bind("click", function(){
$('#test').append("<p>我的绑定函数3</p>");
});
})
</script> <body>
<button id="btn">点击我</button>
<div id="test"></div>
</body>
当单击按钮后，会出现如上图所示的效果。
1. 移除按钮元素上所有注册的事件
添加一个移除事件的按钮。然后为按钮绑定一个事件，代码如下：
<script type="text/javascript">
$(function(){
$('#btn').bind("click", function(){
$('#test').append("<p>我的绑定函数1</p>");
}).bind("click", function(){
$('#test').append("<p>我的绑定函数2</p>");
}).bind("click", function(){
$('#test').append("<p>我的绑定函数3</p>");
});
$('#delAll').click(function(){
$('#btn').unbind("click");
});
})
</script> <body>
<button id="btn">点击我</button>
<div id="test"></div>
<button id="delAll">删除所有事件</button>
</body>
因为元素绑定的都是 click 事件，所以不写参数也可以达到同样的目的。
$('#delAll').click(function(){
$('#btn').unbind();
});
下面来看看 unbind() 方法的语法结构：unbind([type] , [data]);
第1个参数是事件类型，第2个参数是将要移除的函数，具体说明如下。
(1) 如果没有参数，则删除所有绑定的事件。
(2) 如果提供了事件类型作为参数，则只删除该类型的绑定事件。
(3) 如果把在绑定时传递的处理函数作为第2个参数，则只有这个特定的事件处理函数会被删除。
2. 移除<button>元素的其中一个事件
首先需要为这些匿名处理函数指定一个变量。然后就可以单独删除某一个事件了， jQuery 代码如下：
<script type="text/javascript">
$(function(){
$('#btn').bind("click", myFun1 = function(){
$('#test').append("<p>我的绑定函数1</p>");
}).bind("click", myFun2 = function(){
$('#test').append("<p>我的绑定函数2</p>");
}).bind("click", myFun3 = function(){
$('#test').append("<p>我的绑定函数3</p>");
});
$('#delTwo').click(function(){
$('#btn').unbind("click",myFun2);
});
})
</script> <body>
<button id="btn">点击我</button>
<div id="test"></div>
<button id="delTwo">删除第二个事件</button>
</body>
当单击“删除第二个事件”按钮后，再次单击“点击我”按钮，显示下图所示的效果。
另外，对于只需要触发一次，随后就要立即解除绑定的情况，jQuery 提供了一种简写方法——one() 方法。 one() 方法可以为元素绑定处理函数。当处理函数触发一次后，立即被删除。即在每个对象上，事件处理函数只会被执行一次。
one() 方法的结构与 bind() 方法类似，使用方法也与 bind() 方法相同，其语法结构如下：one( type, [data], fn )；
示例代码如下：
<script type="text/javascript">
$(function(){
$('#btn').one("click", function(){
$('#test').append("<p>我的绑定函数1</p>");
}).one("click", function(){
$('#test').append("<p>我的绑定函数2</p>");
}).one("click", function(){
$('#test').append("<p>我的绑定函数3</p>");
});
})
</script> <body>
<button id="btn">点击我</button>
<div id="test"></div>
</body>
使用one() 方法为<button>元素绑定单击事件后，只在用户第1次单击按钮时，处理函数才执行，之后的单击毫无作用。
jQuery 移除事件的更多相关文章
- javascript和jquery 移除事件 和 改变样式
javascript移除事件: document.getElementById("word").onmouseover = null; javascript改变样式: docume ...
- JQuery移除事件
移除事件 unbind(type [,data]) //data是要移除的函数 $('#btn').unbind("click"); //移除click $('#btn') ...
- jQuery 移除事件与模拟事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- jquery移除事件，绑定事件，触发事件
$('.gcddfadf-btn-pay').unbind('click');//移除绑定事件 $('.gcddfadf-btn-pay').bind('click',function(){});// ...
- jquery 使用off移除事件 使用one绑定一次事件，on绑定事件后触发多次相同的事件的异常
<!-- jquery 移除事件,绑定一次事件,搜狗 one --> <!DOCTYPE html> <html lang="en"> < ...
- 11月8日上午Jquery的基础语法、选取元素、操作元素、加事件、挂事件及移除事件
jquery基础知识 1.jquery文件的引入,所有的js代码要写在下面那段代码下面. <script src="../jquery-1.11.2.min.js">& ...
- Jquery挂事件与移除事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery移除、绑定、触发元素事件使用示例详解
这篇文章主要介绍了jquery移除.绑定.触发元素事件使用示例详解,需要的朋友可以参考下. unbind(type [,data]) //data是要移除的函数 $('#btn').unbind(&q ...
- 使用jquery移除前面通过onclick绑定的元素的事件，然后重新绑定别的函数来执行onclick事件。
http://caibaojian.com/css3/experience/bugs.htm 使用jquery移除前面通过onclick绑定的元素的事件,然后重新绑定别的函数来执行onclick事件. ...
随机推荐
- c# API接收Base64转图片
/// <summary> /// API接收Base64转图片 /// </summary> /// <param name="Img">图片 ...
- Java开发笔记（六十一）Lambda表达式
前面介绍了匿名内部类的简单用法,通过在sort方法中运用匿名内部类,不但能够简化代码数量,还能保持业务代码的连续性.只是匿名内部类的结构仍显啰嗦,虽然它省去了内部类的名称,但是花括号里面的方法定义代码 ...
- SSM整合Netty5.0详细说明
阅读本文约“3.2分钟” 最近又有粉丝加Q群讨论netty整合SSM项目的方式等,我在这里抽了休息日的时候整理一下,一步一步的记录,注意的是,本案例仅实现了用netty整合SSM后与单片机等类TCP应 ...
- spring----bean的使用
这篇文章不介绍spring的相关概念,只记录一下springbean的创建方式和使用方式. 一.bean的创建和调用 1.创建演示需要用到的类:Student.Teacher.Person packa ...
- Vue介绍
1.Vue的简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 AP ...
- matlab练习程序（渲染三原色）
这里我用的空间是x向右为正,y向下为正,z向屏幕里面为正.相当于标准右手系绕x轴旋转了180度. 将三个点光源放在 r = [0.3,0,0.5];g = [0.3,-0.5*cos(pi/6),-0 ...
- ASP.NET Zero--解决方案结构（层）
解决方案结构(层) 创建和下载项目后,您将具有如下所示的解决方案结构: 解决方案有8个项目: Core项目包含域层类(如 实体 和 域服务). Application项目包含应用程序逻辑(如应用程序服 ...
- vue（1）——node.js安装使用，利用npm安装vue
node node简介 node.js也是用js开发的语言,而且是一门服务端语言,更有大神利用node写了一个操作系统出来——NodeOS node能干什么 自带下载工具: 对于我们开发前端项目,no ...
- 【原】Java学习笔记020 - 面向对象
package cn.temptation; public class Sample01 { public static void main(String[] args) { // 成员方法的参数列表 ...
- Camera Binning Mode
Camera Binning Mode:像素合并模式,将相邻的像素单元电荷通过物理的方法叠加在一起作为一个像素输出信号: 水平方向Binning: 同列相邻行的电荷叠加 垂直方向Binning: ...