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事件. ...
随机推荐
- BOM简单知识
JS分为ECMAScript,DOM,BOM BOM是用来和浏览器进行‘’对话‘’的 一:与window对象进行交互: 1.查看用户信息: window.navigator.userAgent; 可以 ...
- 基本数据类型 列表 list
今日内容一.列表======================================基本使用======================================1.用途:用来记录同种属 ...
- Android 为TV端助力
记录两次事情: 第一个给view添加动画效果,需要保证view是可以获取焦点的 第二个给listview,GridView设置选择器 listselector时,要保证他的子item无背景,否则选择器 ...
- Android EditText常用属性
一.EditText介绍 ①EditText是一个输入框,在Android开发中是常用的控件.也是获取用户数据的一种方式. ②EditText是TextView的子类,它继承了TextView的所有属 ...
- Android远程桌面助手之系统兼容篇
Android远程桌面助手理论上兼容Android4.4至Android8.1之间所有的原生安卓系统,其他第三方ROM,如MIUI.Flyme.EMUI和Smartisan OS等也都陆续测试过,目前 ...
- Visual Studio 无法记忆标签页、断点等的解决办法
1.到工程目录删除*.suo文件 2.*.suo默认是隐藏的,需要打开查看隐藏文件的开关
- 基础环境系列：PHP7.3.0并连接pache/IIS和MySQL
版本: php7.3.0 MySQL8.0.12 Apache2.4 IIS8 一.下载PHP 1.下载php3.7 PHP版本:php7.3(7.3.0) 下载地址:https://windows ...
- nodejs 使用 js 模块
nodejs 使用 js 模块 Intro 最近需要用 nodejs 做一个爬虫,Google 有一个 Puppeteer 的项目,可以用它来做爬虫,有关 Puppeteer 的介绍网上也有很多,在这 ...
- git上传新项目到coding
1:coding.net注册账号,并创建项目.可以将readme.txt打上勾 2:cd到本机的项目文件夹下 在git中代表workspace 3:mac用户用ls -all ,linux用户用ll ...
- Got a packet bigger than‘max_allowed_packet’bytes错误的解决方法
通常项目上线前都有一些初始化数据需要导入,在今天博客系统发布前我使用sqlyog工具远程登录服务器的Mysql数据库,执行sql脚本对初始数据进行导入的时候报错: Got a packet bigge ...