jQuery的unbind()函数详解

喜欢而已 提交于 2020-03-02 06:16:02

转:http://www.popo4j.com/article/jQuery-unbind.html

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

$("#testButton").click(function() {alert("I'm Test Button");});

我们如果要取消绑定的事件呢?
jQuery有unbind的方法,专门用来取消绑定的事件

$("#testButton").unbind("click");

是不是很简单?如果你的click有2个事件的话,你还可以使用unbind("click", fnName)来删除特定函数的绑定。

为什么有这个取消特定函数的方法呢,我们来看下例子,我们会发现,javaScript的事件,跟C#的事件一样,事件的绑定是叠加(+=) 而不是覆盖。

var Eat = function() {alert("我要吃饭");}var PayMoney = function() {alert("先付钱");}jQuery(document).ready(function() {$("#testButton").click(Eat);$("#testButton").bind("click", PayMoney);});

 我们发现会先弹出:“我要吃饭”紧接着会弹出“先付钱”

要取消绑定特定函数的话:

$("#testButton").unbind("click", PayMoney);

 注意,jQuery的unbind方法只能取消jquery bind()方法绑定的事件,

在jQuery的源码中我们可以看到$().click最后还是调用了$().bind("click")事件,所以只要是jQuery添加的事件,unbind就能解除事件绑定.对于这种原生JS添加的事件或者其他JS框架添加的事件,unbind就无能为力了

<input id="testButton" type="button" value="Test Button" onclick="Eat();" /><script type="text/javascript">jQuery(document).ready(function() {$("#testButton").unbind("click", Eat);$("#testButton").unbind();$("#testButton").bind("click", PayMoney);});</script>

 大家猜猜,会显示什么?吃饭?付钱?答案是Eat -> PayMoney,啊!!!我这里取消了绑定,又删除了特定的绑定,为什么还会执行Eat呢?

仔细一看有个

onclick="Eat();"

unbind函数如何解决这个问题?大家去看下这篇文章jQuery替换element元素上已经绑定的事件

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!