今天在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() });