jqueryUnbind

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

jQuery的绑定事件非常方便,有bind、unbind、live、one,还有它帮你把一些常用的事件给单独了出来,比如控件的onclick事件,我们绑定onclick事件的时候只需要
view source
print?
1    $("#testButton").click(function() {
2    alert("I'm Test Button");
3    });

详细的可以参考我写过的jQuery事件机制和jquery如何绑定事件这两篇文章
如果我们要取消绑定的事件?jQuery有unbind的方法,专门用来取消绑定的事件
view source
print?
1    $("#testButton").unbind("click");

是不是很简单?如果你的click有2个事件的话,你还可以使用unbind("click", fnName)来删除特定函数的绑定。
为什么有这个取消特定函数的方法呢,我们来看下例子,我们会发现,javaScript的事件,跟C#的事件一样,事件的绑定是叠加(+=) 而不是覆盖。
view source
print?
01    var Eat = function() {
02    alert("我要吃饭");
03    }
04    var PayMoney = function() {
05    alert("先付钱");
06    }
07    jQuery(document).ready(function() {
08    $("#testButton").click(Eat);
09    $("#testButton").bind("click", PayMoney);
10    });

我们发现会先弹出:“我要吃饭”紧接着会弹出“先付钱”
要取消绑定特定函数的话:
view source
print?
1    $("#testButton").unbind("click", PayMoney);

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

在jQuery的源码中我们可以看到$().click最后还是调用了$().bind("click")事件,所以只要是jQuery添加的事件,unbind就能解除事件绑定.对于这种原生JS添加的事件或者其他JS框架添加的事件,unbind就无能为力了
view source
print?
1    <input id="testButton" type="button" value="Test Button" onclick="Eat();" />
2    <script type="text/javascript">
3    jQuery(document).ready(function() {
4    $("#testButton").unbind("click", Eat);
5    $("#testButton").unbind();
6    $("#testButton").bind("click", PayMoney);
7    });
8    </script>

大家猜猜,会显示什么?吃饭?付钱?答案是Eat -> PayMoney,啊!!!我这里取消了绑定,又删除了特定的绑定,为什么还会执行Eat呢?
仔细一看有个
view source
print?
1    onclick="Eat();"

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




http://www.popo4j.com/article/jQuery-replace-element-binding-event.html


jQuery如何重新绑定已经绑定的事件?虽然我们现在推荐行为分离,渐进增强,但在很多遗留系统里还是存在很多这样的代码
view source
print?
1    <input type="button" value="ClickMe" id="btn1" onclick="foo()" />

就是直接在DOM元素上绑定事件

这样做有很多缺点
1.代码高度耦合
2.增加HTML大小
3.书写不了逻辑性很强的代码

这种绑定事件的方法太丑陋了,我们看看jquery等框架是如何绑定事件的?
view source
print?
1    $("#btn1").click(function(){
2    foo();
3    });

当然在新系统里面我们可以直接绑定事件,但对于这种直接在elments上通过onclick(),onchange()来绑定事件的遗留的系统怎么办?
来看jquery如何巧妙的实现替换elements已绑定事件
view source
print?
1    ("#btn1").unbind('click').removeAttr('onclick').click(function() {
2    alert('The method has invoked by Jquery.');
3    });

我们分析下核心代码
我们先通过jQuery的unbind()方法解绑click事件,然后removeAttr(“onclick”),
就能把onclick属性给去掉了
然后通过jQuery的bind()或者直接click()来重新绑定我们的click事件


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值