在绑定事件的过程中，不仅可以为同一个元素绑定多个事件，也可以为多个元素绑定同一个事件。假设网页上有一个<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. 从零开始学安全(三十七)●VM汇编环境搭建

    需要下载 vm 虚拟机 破解版连接 链接:https://pan.baidu.com/s/1r9MyPkNBmiYhQ8bdUxPmvQ 提取码:2o98 镜像文件和开发环境 链接:https://p ...

  2. 【开源】SpringBootNetty聊天室V1.2.0升级版本介绍

    前言 SpringBoot!微服务微架构的基础,Netty通信框架的元老级别框架,即之前的SpringBoot与Netty的实现聊天室的功能后已经过了不到一周的时间啦,今天我们更新了项目版本从V1.0 ...

  3. C# 定时器-System.Timers.Timer

    using Newtonsoft.Json; using Rafy; using Rafy.Domain; using System; using System.Collections.Generic ...

  4. 解决Windows下栈内存过小的问题

    本地是windows环境 这个需要对你的IDE进行更改 拿Dev-C++来说 加入一条编译命令就好 -Wl,--stack= 评测机是Windows环境 很简单 在你的代码前面加一行 #pragma ...

  5. .Net Core + Angular Cli / Angular4 开发环境搭建

    一.基础环境配置 1.安装VS 2017 v15.3或以上版本 2.安装VS Code最新版本 3.安装Node.js v6.9以上版本 4.重置全局npm源,修正为 淘宝的 NPM 镜像: npm  ...

  6. 使用OkHttp和Retrofit发送网易云信验证码

    短信服务(Short Message Service)是网易网易云通信为用户提供的一种通信服务的能力,目前支持验证码类短信.通知类短信.运营类短信.语音类短信.国际短信等事务性短信.网易网易云通信短信 ...

  7. 2019Java查漏补缺（二）

    查看了公众号:java之间的整理的集和文章,文章地址 总结和搜索了一下网络知识,总结了一下: 1.String 的hashcode()方法 2.switch总结: 3.如何实现克隆 1.String ...

  8. 浅谈SPA

    最近一直在学习关于Vue的一些知识,由于遇到了问题,去网上查找资料,收获颇丰,在此分享. 1. 什么是SPA? 单页Web应用(single page web application, SPA),就是 ...

  9. 智能POS（轻餐、正餐同理）桌台页面已结金额，只做参考，不做对账使用

    智能POS桌台已结金额只用来做参考使用,不做对账保障: 已结金额只有桌台一次结账金额,若存在反结账或退款的情况则不会减去相应的已结金额: 点餐无桌台的订单,金额不做统计: 口碑订单.扫码点餐,金额不做 ...

  10. hive笔记：复杂数据类型-map结构

    map 结构 1. 语法:map(k1,v1,k2,v2,…)   操作类型:map ,map类型的数据可以通过'列名['key']的方式访问 案例: select deductions['Feder ...