在绑定事件的过程中，不仅可以为同一个元素绑定多个事件，也可以为多个元素绑定同一个事件。假设网页上有一个<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# 操作Excel图形——绘制、读取、隐藏、删除图形

    简介 本篇文章将介绍C# 如何处理Excel图形相关的问题,包括以下内容要点: 1.绘制图形 1.1 绘制图形并添加文本到图形 1.2 添加图片到图形 1.3 设置图形阴影效果 1.4 设置图形透明度 ...

  2. [LeetCode] 1. Two Sum 两数之和

    Part 1. 题目描述 (easy) Given an array of integers, return indices of the two numbers such that they add ...

  3. Bootstrap方法之--排版、代码

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  4. ssm基础搭建步骤

    今天搭建新的项目环境,从网上找了些ssm的搭建步骤,终于找到了一位csdn的大佬,可以说写的特别详细,按照上面步骤搭建即可,为了方便日后参考,转载到本人博客,原文链接:https://blog.csd ...

  5. 纯CSS修改checkbox复选框样式-02

    我有用过这个纯修改input属性的 本人修改后的代码和效果图(修的不好), 这个是改动最简单的: css代码 input[type=checkbox]{ visibility: hidden; } i ...

  6. 博弈论进阶之SG函数

    SG函数 个人理解:SG函数是人们在研究博弈论的道路上迈出的重要一步,它把许多杂乱无章的博弈游戏通过某种规则结合在了一起,使得一类普遍的博弈问题得到了解决. 从SG函数开始,我们不再是单纯的同过找规律 ...

  7. ASP.NET Core 一步步搭建个人网站（1）_环境搭建

    ASP.NET Core2.0发布有一阵子了,这是.NET 开源跨平台的一个重大里程碑, 也意味着比1.0版本要更加成熟.目前.net core具有开源.跨平台.灵活部署.模块化架构等等特性,吸引着一 ...

  8. 从.Net到Java学习第十篇——Spring Boot文件上传和下载

    从.Net到Java学习系列目录 图片上传 Spring Boot中的文件上传就是Spring MVC中的文件上传,将其集成进来了. 在模板目录创建一个新的页面 profile/uploadPage. ...

  9. zabbix3.4 端口和进程监控配置

    虚拟机系统版本:centos7.5 zabbix server 版本:zabbix3.4 配置步骤:待定 近期即将更新!

  10. Android 简单登陆 涉及 Button CheckBox TextView EditText简单应用

    GitHub地址:https://github.com/1165863642/LoginDemo 直接贴代码<?xml version="1.0" encoding=&quo ...