在绑定事件的过程中，不仅可以为同一个元素绑定多个事件，也可以为多个元素绑定同一个事件。假设网页上有一个<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. Qt 给控件QLineEdit添加clicked事件方法

    做Qt开发的会知道QLineEdit是默认没有clicked事件的,但是Qt有很好的一套信号/槽机制,而且Qt是基于C++面向对象的思想来设计的,那么我们就很容易通过自己定义一些类,重写QLineEd ...

  2. Echarts 数据视图 生成Excel的方法

    一.生成Excel,两大方向:1后台生成Excel 查询数据库,使用NOPI生成Excel.2前台js生成Excel三种方式1)jquery.table2excel.js --采用,优势:兼容IE和C ...

  3. 原生JS编写兼容IE6,7,8浏览器无缝自动轮播(带按钮切换)

    项目要求页面兼容IE6,7,8等浏览器,我们可能会遇到这个轮播效果,轮播板块要求:无限循环.自动轮播和手动切换功能,每一次滚动一小格,网上有很多这类插件,例如:swiper等! 但是很多都是不兼容IE ...

  4. 异步加载js的三种方法

    js加载时间线 : 它是根据js出生的那一刻开始记录的一系列浏览器按照顺序做的事,形容的就是加载顺序,可以用来优化什么东西,理论基础,背下来. 1.创建Document对象,开始解析web页面.解析H ...

  5. Dynamics 365-RetrieveDependenciesForDeleteRequest

    不少人在使用Dynamics 365的时候,或多或少都会遇到Delete a Component的情况,比如Unregister a Plugin/Workflow. 想象这么一个常见的情形:你定制了 ...

  6. 使用synchronized的几种场景

    1.修饰一个方法synchronized 修饰一个方法很简单,就是在方法的前面加synchronized,例如: public synchronized void method() { // todo ...

  7. GitHub和75亿美金

    如果你是看到了75亿进来的,还在纳闷前面那个github的是个什么,你可以走人了?如果你进来是想看到微软两个字的,请继续. 微软以75亿美金的股票收购Github这件事情,从周六一早我爬山到香山琉璃塔 ...

  8. MongoDB 如何实现备份压缩

    背景及原理 数据库的备份是灾难恢复的最后一道屏障,不管什么类型的数据库都需要设置数据库备份,MongoDB也不例外.MongoDB 3.0 后 ,数据库可以采用Wiredtiger存储引擎后(3.2 ...

  9. Oracle的ORA-02292报错：违反完整性约束，已找到子记录

    第一种方法: 第一步就是找到子表的记录: select a.constraint_name, a.table_name, b.constraint_name from user_constraints ...

  10. c/c++ 网络编程 getaddrinfo 函数

    网络编程 getaddrinfo 函数 解析网址,返回IP地址. 例子: #include <iostream> #include <string.h> #include &l ...