测试：
页面代码：
<body>

    <input type="button" name="aaa" value="点击我">

    <input type="checkbox" name="checkbox1">

</body>

JQuery代码：

$().ready(function(){

      for (var i = 0; i < 3; i++) {

            $("input[type='button']").click(function(){

               alert("aaaa");

          });

     }

}

alert("aaaa")会执行三次，在事件嵌套事件中，不希望看到这样的情况，需要把上层事件禁用，此时可引入bind和unbind函数解决。
引入函数:

for (var i = 0; i < 3; i++) {

        $("input[type='button']").unbind("click");

        $("input[type='button']").bind("click", function(){

            alert("aaa");

        });

 }
alert("aaa");仅执行一次。

bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数
unbind() 方法移除被选元素的事件处理程序。能够移除所有的或被选的事件处理程序，或者当事件发生时终止指定函数的运行。
event 是
事件类型，类型包括：blur、flcus、load、resize、scroll、unload、click、dblclikc、mousedown、
mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、
select、submit、keydown、keypress、keyup和error等，当然也可以是自定义名称。
data 为可选参数，作文event.data属性值传递给事件对象的额外数据对象。
function 是用来绑定的处理函数。 
语法：
$(selector).bind(event,data,function) 
// event 和 function 必须指出

下面些段代码做说明：

例1：删除p的所有事件

$("p").unbind();

例2：删除p的click事件

$("p").unbind("click");

例2：删除p元素click事件后出发的test函数 和 添加p元素click事件后触发的test函数

$("p").unbind("click",test);

$("p").bind("click",test);

注意：要定义 .bind() 必须指明什么事件和函数

现在来看个简单的demo ， 整个div有一个点击收起展开的事件，如果想要点击链接但是不触发div的点击事件，需要在触发链接的时候把div的点击事件禁用，这里我用到链接 mouseenter事件是unbind删除div的事件。这里还不算完，这时候只要鼠标进入链接区域，div的点击事件就删除了，我们还需要加入鼠标移 出链接区域的时候恢复div点击事件。代码如下：

1

2

3

4

5

6

7

8

9

10

$(function(){ var Func = function(){    $(".com2").toggle(200); }

        $(".test").click(Func)

        $(".test a").mouseenter(function(){

                $(".test").unbind(); //删除.test的所有事件 });

        $(".test a").mouseleave(function(){

                $(".test").bind("click",Func); //添加click事件 }); });

event 是事件类型
…
function 是用来绑定的处理函数。
部分内容来自http://www.dearoom.com/blog/详解unbind和bind/

http://www.dearoom.com/blog/事件捕获事件冒泡和阻止事件冒泡/

jQuery bind and unbind (绑定和解除)的更多相关文章

  1. JQuery中bind和unbind函数与onclick绑定事件区分

    JQuery中bind和unbind函数转载:   https://blog.csdn.net/liucheng417/article/details/51131982 页面代码: <body& ...

  2. JQuery 的bind和unbind函数

    测试:页面代码:<body>     <input type="button" name="aaa" value="点击我" ...

  3. jquery的bind跟on绑定事件的区别

    jquery的bind跟on绑定事件的区别:主要是事件冒泡: jquery文档中bind和on函数绑定事件的用法: .bind(events [,eventData], handler) .on(ev ...

  4. Jquery中的事件绑定$(&quot;#btn&quot;).bind(&quot;click&quot;,function(){ })

    Jquery中的事件绑定:$("#btn").bind("click",function(){  }) 由于每次都这么调用太麻烦,所以jquery就用$(&qu ...

  5. jQuery三种事件绑定方式.bind(),.live(),.delegate()

    .bind(), .live(), 和 .delegate()之间的区别并不明显.但是理解它们的不同之处有助于写出更简洁的代码,并防止我们的交互程序中出现没有预料到的bug. 基础 DOM树 首先,图 ...

  6. jQuery中的事件绑定的几种方式

    jQuery目前有on(),bind(),delegate(),live()四种绑定方式,但是随着版本的不断更新,有的方式也相应的被淘汰掉 [band()方式绑定] 3.0版本之前的绑定方式比较常用的 ...

  7. jQuery中的事件绑定方法

    在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...

  8. 关于jQuery新的事件绑定机制on()的使用技巧

    关于jQuery新的事件绑定机制on()的使用技巧 http://www.jb51.net/article/36064.htm 本篇文章介绍了,关于jQuery新的事件绑定机制on()的使用技巧.需要 ...

  9. jquery bind、delegate、live、on的区别及联系

    jquery bind.delegate.live.on的区别及联系 概述 jquery提供了好几个API都可以实现事件绑定, 如 delegate, live , bind 等, 可是有没有疑惑这几 ...

随机推荐

  1. df和du显示的磁盘空间使用情况不一致的原因及处理

    在Linux下查看磁盘空间使用情况,最常使用的就是du和df了.然而两者还是有很大区别的,有时候其输出结果甚至非常悬殊. 1. 如何记忆这两个命令 du-Disk Usage df-Disk Free ...

  2. 【收藏用】--切勿转载Java处理XML的三种主流技术及介绍

    原帖地址 : http://www.ibm.com/developerworks/cn/xml/dm-1208gub/ XML (eXtensible Markup Language) 意为可扩展标记 ...

  3. C++学习5

    类是创建对象的模板,一个类可以创建多个对象,每个对象都是类类型的一个变量:创建对象的过程也叫类的实例化.每个对象都是类的一个具体实例(Instance),拥有类的成员变量和成员函数. 与结构体一样,类 ...

  4. Html5中的跨页面消息传输

    1.如果要接受从其他的窗口那里发过来的消息,就必须对窗口对象的message事件进行监控. window.addEventListener("message",function() ...

  5. lambda表达式、内置函数、进制和文件操作

    lambda表达式 定义函数(普通方式)def f1(): return 123 f2 = lambda : 123 def f3(a1,a2): return a1+a2 定义函数(lambda表达 ...

  6. C Primer Plus(第五版)9

    第 9 章 函数 在本章中你将学习下列内容: · 关键字: return (返回) · 运算符 * (一元) & (一元) · 函数及其定义方式. · 参数和返回值的使用方法. · 使用指针变 ...

  7. Codeforces 626C Block Towers「贪心」「二分」「数学规律」

    题意: 一堆人用方块盖塔,有n个人每次只能加两块方块,有m个人每次只能加三块方块.要求每个人盖的塔的高度都不一样,保证所用方块数最少,求最高的塔的高度. 0<=n+m  0<=n,m< ...

  8. 在iis中注册.net framework

    首先定位到文件夹:cd C:\Windows\Microsoft.NET\Framework\v4.0.30319 执行命令:aspnet_regiis.exe -i

  9. CODESOFT 2015中的条形码对象该如何创建

     CODESOFT条码设计软件提供了大量适应行业要求的符号,以及创建二维条形码的选项.用户可以通过条形码对话框选择符号.定义其属性以及输入要编码的消息.下面小编带大家具体学习下如何在CODESOFT ...

  10. canvas-7globleCompositeOperation2.html

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