jQuery 取消绑定事件unbind使用方法详解

今天在click打开新窗口上也遇到了问题,切换url之后发现window.open还是原来的窗口,第一时间怀疑,卧槽难道window.open有缓存?

结果搜了一下一脸困惑貌似是真的,结果试了那个方法也没用。

后来各种console.log()排查,最终怀疑到事件绑定上去了,在绑定Click事件前,先将上一个解除绑定,具体方法如下:

比如:$("p").unbind();。如果你需要解除所有事件的绑定,这是一个非常好的方法。如果要解除click事件的绑定:$("p").unbind("click");就OK了。

实际上,我们平时用的比如$("p").click(function(){})也是bind的缩写$("p").bind("click", function(){})

移除事件

具体例子如下:

/click的所有事件将被移除
$("a").bind("click.a",function(){alert("click a");});
$("a").bind("click",function(){alert("b");})
$("a").unbind("click");
//第一个click事件在第一次点击时有效,点击过后,所有的click事件都被移除
$("a").bind("click.a",function(){
 alert("click a");
 $("a").unbind("click");
});
$("a").bind("click",function(){alert("b")});
//只有click中的a事件会被移除
$("a").bind("click.a",function(){alert("click a");});
$("a").bind("click",function(){alert("b");})
$("a").unbind("click.a");
//click中的a事件会执行一次,然后再被移除;其他事件不受干扰
$("a").bind("click.a",function(){
 alert("click a");
 $("a").unbind("click.a");
});
$("a").bind("click",function(){alert("b")});
//click中的a事件会执行一次,然后再被移除;其他事件不受干扰
$("a").bind("click",a=function(){
 alert("click a");
 $("a").unbind("click",a);
});
$("a").bind("click",function(){alert("b")});

例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>unbind方法移除绑定事件</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
function oClick(){ //自定义事件
$("#divTip").append("<div>这是按钮二绑定的事件</div>");
};
$("input:eq(0)").bind("click",function(){
$("#divTip").append("<div>这是按钮一绑定事件</div>");
});
$("input:eq(1)").bind("click",oClick);
$("input:eq(2)").bind("click",function(){
$("input").unbind("click",oClick);
$("#divTip").append("<div>删除按钮二事件</div>");
});
$("input:eq(3)").bind("click",function(){
$("input").unbind();
$("#divTip").append("<div>移出所有按钮绑定的事件</div>");
});
})
</script>
</head>

<body>
<div>
<input id="button1" class="btn" value="按钮一" type="button"/>
<input id="button2" type="button" value="按钮二" class="btn"/>
<input id="button3" type="button" value="删除按钮二事件" class="btn"/>
<input id="button4" type="button" value="删除所有事件" class="btn"/>
</div>
<div id="divTip"></div>
</body>
</html>

点击按钮一和按钮二:


点击删除按钮二事件在点击按钮二无反应点击按钮一有反应:

 


点击删除所有事件后点击所有按钮无反应:

 

绑定事件

有bind、live、one还有它帮你把一些常用的事件给单独了出来,比如控件的onclick事件,我们绑定onclick事件的时候只需要:

$("#testButton").click(function() { 
alert("I'm Test Button"); 
});
其中说明一下:jQuery的.bind()、.live()和.delegate()之间区别

.bind()

$('a').bind('click', function() { alert("That tickles!") });
这是最简单的绑定方法了。JQuery扫描文档找出所有的$(‘a’)元素,并把alert函数绑定到每个元素的click事件上。

.live()

$('a').live('click', function() { alert("That tickles!") });
JQuery把alert函数绑定到$(document)元素上,并使用’click’和’a’作为参数。任何时候只要有事件冒泡到document节点上,它就查看该事件是否是一个click事件,以及该事件的目标元素与’a’这一CSS选择器是否匹配,如果都是的话,则执行函数。

live方法还可以被绑定到具体的元素(或“context”)而不是document上,像这样:

$('a', $('#container')[0]).live(...);
.delegate()

$('#container').delegate('a', 'click', function() { alert("That tickles!") });
JQuery扫描文档查找$(‘#container’),并使用click事件和’a’这一CSS选择器作为参数把alert函数绑定到$(‘#container’)上。任何时候只要有事件冒泡到$(‘#container’)上,它就查看该事件是否是click事件,以及该事件的目标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话,它就执行函数。

可以注意到,这一过程与.live()类似,但是其把处理程序绑定到具体的元素而非document这一根上。精明的JS’er们可能会做出这样的结论,即$('a').live() == $(document).delegate('a'),是这样吗?嗯,不,不完全是。

为什么.delegate()要比.live()好用

基于几个原因,人们通常更愿意选用jQuery的delegate方法而不是live方法。考虑下面的例子:

$('a').live('click', function() { blah() });   // 或者   $(document).delegate('a', 'click', function() { blah() });

时间: 2024-11-10 00:40:03

jQuery 取消绑定事件unbind使用方法详解的相关文章

jQuery中extend()和fn.extend()方法详解

  jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能够创建全局函数或者选择器,而jQuery.fn.extend()方法能够创建jQuery对象方法. 这两个方法用的是相同的代码,一个用于给jQuery对象或者普通对象合并属性和方法一个是针对jQuery对象的实例,对于基本用法举几个例子: html代码如下:    代码如下: <!doctype html> <html> <head>

jQuery中extend()和fn.extend()方法详解_jquery

这两个方法用的是相同的代码一个用于给jQuery对象或者普通对象合并属性和方法一个是针对jQuery对象的实例对于基本用法举几个例子 html代码如下 复制代码 代码如下: <!doctype html> <html>    <head>       <title></title>         <script src='jquery-1.7.1.js'></script>    </head>    <

jQuery给元素添加样式的方法详解_jquery

本文实例讲述了jQuery给元素添加样式的方法.分享给大家供大家参考,具体如下: 1.获取和设置样式 $("#tow").attr("class")//获取ID为tow的class属性 $("#two").attr("class","divClass")//设置Id为two的class属性. 2.追加样式 复制代码 代码如下: $("#two").addClass("divCl

jQuery遍历DOM元素与节点方法详解_jquery

本文实例讲述了jQuery遍历DOM元素与节点方法.分享给大家供大家参考,具体如下: 一.向上遍历--祖先元素 ① $(selector).parent([filter]):返回selector匹配元素的直接父元素,方法可以接受一个过滤selector来过滤返回的父元素. ② $(selector).parents([filter]):返回匹配元素的所有祖先节点,一直向上直到文档根元素html,方法可以接受一个过滤selector来过滤返回的祖先节点. 备注:parent与parents的区别,

Jquery 模板数据绑定插件的使用方法详解

本篇文章是对在Jquery中模板数据绑定插件的使用方法进行了详细的分析介绍,需要的朋友参考下   1 绑定后台数据到指定模板(无嵌套,内容均为后台数据原始信息,前台绑定)以通话记录页为例: 首先指定目标容器: 复制代码 代码如下:  <dl class="box_pannel_content_filled_border none" id="gvRecCalls">    <dd class="bg_blue">     &

Jquery 模板数据绑定插件的使用方法详解_jquery

1 绑定后台数据到指定模板(无嵌套,内容均为后台数据原始信息,前台绑定)以通话记录页为例:首先指定目标容器: 复制代码 代码如下:  <dl class="box_pannel_content_filled_border none" id="gvRecCalls">   <dd class="bg_blue">    <p class="width_level_half_2 fl nopitch"

jquery表单插件Autotab使用方法详解_jquery

Autotab也是一款功能专一的表单插件,它提供了自动跳格的功能,当用户输入的字符数一旦超过已定义的最大长度,则会根据事先设置的目标自动跳转到相应元素上,省却了 用户按[Tab]键的麻烦.最典型的应用就是输入IP地址.软件激活码等地方了,我们做的web项目中也有很多地方可以用到这插件,对于提高用户体验还是很有帮助的. 使用时需要引入jquery.autotab.js,下载地址:点击进入下载页面 <html> <head> <title> New Document <

基于jquery ajax 用户无刷新登录方法详解_jquery

Ajax框架就是提供模块化实现Ajax功能的集合,Ajax框架可以是各种语言实现的(比如SAJAX有各种语言的实现),Ajax只是jquery中的一部分, 实例1 复制代码 代码如下: $.ajax({ type:'post',//可选get url:'action.php',//这里是接收数据的PHP程序 data:'data='dsa',//传给PHP的数据,多个参数用&连接 dataType:'text',//服务器返回的数据类型 可选XML ,Json jsonp script html

探探APP取消屏蔽好友朋友圈方法详解

给各位探探软件的使用者们来详细解析分享一下取消屏蔽好友朋友圈的方法. 方法分享: 打开探探,点击主界面中箭头所指的"三横"符号,接着进入[设置];     然后点击[隐私和通知],随后再进入[已屏蔽用户]列表;     选择所要取消屏蔽的好友,点击其后的[显示],最后点击提示中的[好]就可以了.     好了,以上的信息就是小编给各位探探的这一款软件的使用者们带来的详细的取消屏蔽好友朋友圈的方法解析分享的全部内容了,各位看到这里的软件使用者们,小编相信你们现在那是非常的清楚取消屏蔽的方