在绑定事件的过程中，不仅可以为同一个元素绑定多个事件，也可以为多个元素绑定同一个事件。假设网页上有一个<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. c# 扩展方法初见理解

    个人理解扩展方法是对某些类在不改变源码的基础上添加其他的方法.扩展方法必须是在非泛型的静态类里定义,且第一个参数是要使用this 指定需要扩展的类型. class Program { static v ...

  2. ROW_NUMBER() OVER()函数用法;(分组，排序），partition by

    转载:https://www.cnblogs.com/alsf/p/6344197.html 1.row_number() over()排序功能: (1) row_number() over()分组排 ...

  3. Spring Boot admin 2.0 详解

    一.什么是Spring Boot Admin ? Spring Boot Admin是一个开源社区项目,用于管理和监控SpringBoot应用程序. 应用程序作为Spring Boot Admin C ...

  4. Hibernate框架笔记01_环境搭建_API_CRUD

    目录 1. Hibernate框架的概述 1.1 什么是框架 1.2 经典三层架构 1.3 Hibernate框架 2 Hibernate入门 2.1 下载Hibernate的开发包 2.2 创建项目 ...

  5. Activiti（二） springBoot2集成activiti，集成activiti在线设计器

    摘要 本篇随笔主要记录springBoot2集成activiti流程引擎,并且嵌入activiti的在线设计器,可以通过浏览器直接编辑出我们需要的流程,不需要通过eclipse或者IDEA的actiB ...

  6. 解决nginx配置负载均衡时invalid host in upstream报错

    当前平台: windows nginx版本: 1.11.5 前言: 在配置负载均衡时,同时也需要设置反向代理,当修改了nginx.conf时,发现nginx服务无法开启. 1. 打开"ngi ...

  7. 使用OCLint和Sonar对iOS代码分析和质量管理

    OCLint 是一个强大的静态代码分析工具,可以用来提高代码质量,查找潜在的bug,主要针对c,c++和Objective-c的静态分析. Sonar 是一个用于代码质量管理的开放平台.通过插件机制, ...

  8. ASP.NET没有魔法——ASP.NET MVC IoC代码篇

    上一篇文章主要以文字的形式介绍了IoC及其在ASP.NET MVC中的使用,本章将从以下几点介绍如何使用代码在ASP.NET MVC中实现依赖注入: ● AutoFac及安装 ● 容器的创建 ● 创建 ...

  9. 从0开始的Python学习009参数

    默认参数 对于参数有时候我们希望他是可选的,前面介绍了函数柯里化,当然还有其他的解决方案.如果不想给某些参数提供值的话,就让这写参数使用默认值.在函数定义的时候给参数赋值使用(参数,参数=值..... ...

  10. C# 中使用特性获得函数被调用的路径，行号和函数

    自从 .net framework 4.5  增加了几个特性来获得函数的调用路径(CallerFilePath),调用行号(CallerLineNumber),和调用函数(CallerMemberNa ...