测试:
页面代码:
<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和unbind函数的更多相关文章

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

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

  2. jQuery bind and unbind (绑定和解除)

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

  3. JQuery中事件one、bind、unbind、live、delegate、on、off、trigger、triggerHandler的各种使用区别

    JQuery事件one,支持参数 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> & ...

  4. Jquery动态bind绑定已有函数,函数自动执行的问题解决方法

    在bind后面的方法,不能带括号,带括号函数就自动执行了... <script> //通过子元素删除某行 function deleteRow() { var flag = confirm ...

  5. bind,unbind,one

    刚开始我们先看一下它的定义: .bind( eventType [, eventData], handler(eventObject)) .Bind()方法的主要功能是在向它绑定的对象上面提供一些事件 ...

  6. Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解

    简介 最近了解到很多网页开发者对jquery中的 .bind() .live() .delegate() 和 .on() 方法存在很多的疑惑.这些疑惑通常是关于它们之间真正的区别是什么啊,什么时候该使 ...

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

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

  8. jQuery的.bind()、.live()和.delegate()的区别

    参考:http://kb.cnblogs.com/page/94469/ 摘要:jQuery的.bind()..live()和.delegate()之间的区别并非总是那么明显的,然而,如果我们对所有的 ...

  9. jQuery的.bind()、.live()和.delegate()之间区别

    摘要:jQuery的.bind()..live()和.delegate()之间的区别并非总是那么明显的,然而,如果我们对所有的不同之处都有清晰的理解的话,那么这将会有助于我们编写出更加简洁的代码,以及 ...

随机推荐

  1. php多种实例理解无限极分类

  2. typedef函数指针用法

    typedef void(*vp)(); 将vp声明为一个函数指针类型,该类型的指可以针指向一个没有参数,带空返回值的函数. 调用方法vp p;创建一个vp类型的函数指针p void print(vp ...

  3. Mac Maven java_home错误

    当maven装好之后出现 $ mvn -versionError: JAVA_HOME is not defined correctly. We cannot execute /usr/libexec ...

  4. JVM——判断对象的死活

    一.引用计数法 给对象中添加一个引用计数器,每当有一个地方引用它时,计数器值就加1,当引用失效时,计数器值就减1,任何时刻计数器为0的对象就是不可能再被使用的. 但是它很难解决对象之间相互循环引用的问 ...

  5. 【转】【iOS系列】-iOS查看沙盒文件图文教程(真机+模拟器)

    原文网址:http://www.cnblogs.com/fengtengfei/p/5090276.html 1:模拟器 1.1 方法1: 程序中打印一下的地址,能直接前往沙盒路径. NSString ...

  6. GetPrivateProfileStringA的文件名要小心写

    ::GetPrivateProfileStringA("REMOTE", "host", "http://xxx.comftp.php", ...

  7. PHP写入Txt

    function writelog($str) { $open=fopen("log.txt","a" ); fwrite($open,$str); fclos ...

  8. 6、Android中的NFC技术

    Android对NFC技术的支持 Android2.3.1(API Level = 9)开始支持NFC技术,但Android2.x和Android3.x对NFC的支持非常有限.而从Android4.0 ...

  9. javascript针对DOM的应用

    所谓针对DOM的应用.也就我这里只教大家用javascript操作页面中dom元素做交互.我相信可能大部分人来这里学javascript主要还是想用这个结合页面中的DOM元素做一些实际有用的交互效果. ...

  10. 【LeetCode】102 - Binary Tree Level Order Traversal

    Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to right, ...