Jquery 改变元素的 onclick 事件(出现几个click事件响应叠加的情况解决方案)

6 篇文章 0 订阅
3 篇文章 0 订阅

转载自:http://hi.baidu.com/royripple/item/755d999f04cfd7c9b62531c0

在img响应更改onclick事件的时候,其实会:

          先执行img所定义的 onclick 事件定义的方法, 

          然后执行之前 onclick 所绑定的方法, 

          最后执行这次绑定的方法。

 

为了让前两次响应都不出现。attr('onclick', '')与.unbind('click')两个函数都不能少。

最后代码为:

img.attr('onclick', '').unbind('click').click( function () {hide(v) });


jquery移除button的inline onclick事件

转载自:http://www.cnblogs.com/youring2/archive/2013/01/25/2876514.html

inline onclick代码如下:

<input type="button" id="btnOK" name="" value="确定" onclick="btnOKClick();" />

btnOKClick的代码:

function btnOKClick() {
            alert("btnOK Clicked");
        }

现在要在点击按钮以后,移除onclick事件,并为按钮绑定一个新的click事件。在第二次点击时候,就开始执行第二个事件处理函数,第二个处理函数的代码:

reclick的代码:

function reclick() {
            alert('reclick');
        }

思路:在btnOKClick中移除onclick,然后添加新的绑定,代码如下:

$('#btnOK').attr('onclick', '').bind('click', function () { reclick(); });

加上这段代码后的btnOKClick方法如下:

function btnOKClick() {
            alert("btnOK Clicked");
            $('#btnOK').attr('onclick', '').bind('click', function () { reclick(); });
        }

这种方法在Google Chrome下正常工作,但是在IE的兼容模式下会马上调用reclick方法,这不是我们想要的效果。

出现这种效果的原因貌似是因为onclick执行完了以后,IE回去查看是否有绑定在click上的handler,结构是有的,于是就马上执行了。

为了解决这个问题,我们可以换个思路,就是延迟绑定click事件。具体的代码如下:

复制代码
function btnOKClick() {
            alert("btnOK Clicked");
            setTimeout(function () {
                $('#btnOK').attr('onclick', '').bind('click', function () { reclick(); });
            }, 1);
        }
复制代码

这里使用了setTimeout定时器,在定时器触发以后,才执行移除onclick属性,绑定click handler的代码。

经测试,在IE9的兼容模式和非兼容模式下都可以正常运行;Google Chrome也正常运行。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值