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事件. ...
随机推荐
- 解决GJson 获取web api数据出现Not a JsonObject问题
服务器端web api服务采用asp.net web api编写,对请求的数据序列化成Json格式的字符串进行传递. 客户端采用Java进行接收处理,处理采用GJson进行解析,出现Not a Jso ...
- jupyter notebook安装、登录
pip install jupyter 提示pip需要升级(本人装的是anaconda) 输入:python -m pip install --upgrade pip 安装完成. 运行jupyter ...
- Mac 系统占用100g的解决办法
Mac 关于本机-磁盘管理,如果发现系统占用超过80g以上的小伙伴们可以做以下操作只需要以下4个步骤,轻松降到30g以内!!!!!!!(仅适用于安装了Xcode的小伙伴) 打开Finder,comma ...
- 字符是否为SQL的保留字
要想知道字符是否为MS SQL Server保留字,那我们必须把SQL所有保留字放在一个数据集中.然后我们才能判断所查找的字符是否被包含在数据集中. MS SQL Server保留字: ) = 'ad ...
- Delphi Record To Stream
type TUserInfo = record sUserId,sUserName:String; iUserCount:integer; end; procedure TForm1.Button1C ...
- 浅谈TCP IP协议栈(三)路由器简介
读完这个系列的第一篇浅谈TCP/IP协议栈(一)入门知识和第二篇浅谈TCP/IP协议栈(二)IP地址,在第一篇中,可能我对协议栈中这个栈的解释有问题,栈在数据结构中是一种先进后出的常见结构,而在整个T ...
- FPGA驱动VGA显示静态图片
一 .前言 本文设计思想采用明德扬至简设计法.VGA是最常见的视频显示接口,时序也较为简单.本文从利用显示屏通过VGA方式显示测试图案及静态图片着手带大家接触图像显示应用,算是为后续VGA显示摄像头采 ...
- Bootstrap -- 插件: 模态框、滚动监听、标签页
Bootstrap -- 插件: 模态框.滚动监听.标签页 1. 模态框(Modal): 覆盖在父窗体上的子窗体. 使用模态框: <!DOCTYPE html> <html> ...
- LivePhoto开发，你要知道的知识点
前言 Apple从iPhone6s开始支持Live Photo.Live Photo 会录下拍照前后 1.5 秒所发生的一切,因此用户获得的不仅仅是一张精美照片,还有拍照前后时刻的动作和声音.具体的操 ...
- Python 函数调用&定义函数&函数参数
一.函数调用 在python中内置了很多函数,我们可以直接调用 .想要调用函数首先要知道函数的名称及包含的参数,还可以通过查看python官方的文档:https://docs.python.org/3 ...