在绑定事件的过程中，不仅可以为同一个元素绑定多个事件，也可以为多个元素绑定同一个事件。假设网页上有一个<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 移除事件的更多相关文章

  1. javascript和jquery 移除事件 和 改变样式

    javascript移除事件: document.getElementById("word").onmouseover = null; javascript改变样式: docume ...

  2. JQuery移除事件

    移除事件 unbind(type [,data])     //data是要移除的函数 $('#btn').unbind("click"); //移除click $('#btn') ...

  3. jQuery 移除事件与模拟事件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  4. jquery移除事件，绑定事件，触发事件

    $('.gcddfadf-btn-pay').unbind('click');//移除绑定事件 $('.gcddfadf-btn-pay').bind('click',function(){});// ...

  5. jquery 使用off移除事件 使用one绑定一次事件，on绑定事件后触发多次相同的事件的异常

    <!-- jquery 移除事件,绑定一次事件,搜狗 one --> <!DOCTYPE html> <html lang="en"> < ...

  6. 11月8日上午Jquery的基础语法、选取元素、操作元素、加事件、挂事件及移除事件

    jquery基础知识 1.jquery文件的引入,所有的js代码要写在下面那段代码下面. <script src="../jquery-1.11.2.min.js">& ...

  7. Jquery挂事件与移除事件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jquery移除、绑定、触发元素事件使用示例详解

    这篇文章主要介绍了jquery移除.绑定.触发元素事件使用示例详解,需要的朋友可以参考下. unbind(type [,data]) //data是要移除的函数 $('#btn').unbind(&q ...

  9. 使用jquery移除前面通过onclick绑定的元素的事件，然后重新绑定别的函数来执行onclick事件。

    http://caibaojian.com/css3/experience/bugs.htm 使用jquery移除前面通过onclick绑定的元素的事件,然后重新绑定别的函数来执行onclick事件. ...

随机推荐

  1. vue + elementUi + upLoadIamge组件 上传文件到阿里云oss

    <template> <div class="upLoadIamge"> <el-upload action="https://jsonpl ...

  2. JAVA程序员学PHP

    工作之余,趁着五一假期学习下PHP,都说PHP是世界上最美的语言,而且现在应用的有这么广泛,在短期时间内在编程的市场上打得火热,好奇心趋势我去学习一下,下面便是我学习PHP记录下来的过程,和大家分享一 ...

  3. 0.react学习笔记-环境搭建与脚手架

    0.环境搭建 笔者使用的是deepin/mac两种系统,因为两个电脑经常切换用.环境搭建没什么区别. 0.1 node安装 按照node官网叙述安装 # Using Debian, as root c ...

  4. 解决Centos7 yum 出现could not retrieve mirrorlist 错误

    刚通过VMware12安装了centos7.x后,使用ip addr查看centos局域网的ip发现没有,使用yum安装一些工具包时也出现报错: Loaded plugins: fastestmirr ...

  5. C# 正则表达式应用

    正则表达式平时不常用,经常都是用的时候,临时抱佛脚,查文档,然后就是被各种坑之后,才会逐渐熟练. 在线正则表达式测试:http://tool.oschina.net/regex/ 在线JSON格式化: ...

  6. Salesforce 小知识：大量“子记录”的处理方法

    大量"子记录"的存放 例子:系统中导入了很多"联系人"(Contact)记录,它们没有具体所属的"客户"(Account)记录.那么我们就要 ...

  7. Python 使用Python远程连接并操作InfluxDB数据库

    使用Python远程连接并操作InfluxDB数据库 by:授客 QQ:1033553122 实践环境 Python 3.4.0 CentOS 6 64位(内核版本2.6.32-642.el6.x86 ...

  8. C# 一般处理程序ashx接收服务端post过来json数据

    这个和前端js的接收方式有点不一样,前端接收用request.form["xxx"]即可

  9. 关于sqlserver字符类型查询条件区分大小写

    在写sql的查询时 如下: select * from Users where username='WangE' select * from Users where username='wange' ...

  10. 5.4Python数据处理篇之Sympy系列(四)---微积分

    目录 目录 前言 (一)求导数-diff() 1.一阶求导-diff() 2.多阶求导-diff() 3.求偏导数-diff() (二)求积分-integrate() (三)求极限-limit() ( ...