手机版
你好,游客 登录 注册
背景:
阅读新闻

jQuery使用on()方法绑定的事件被执行多次的问题

[日期:2019-11-22] 来源:cnblogs.com/yanggb  作者:杨冠标 [字体: ]

jQuery用on()方法绑定了事件之后,在代码执行过程中,可能会遇到事件被多次执行的情况。

本来以为是事件冒泡的问题,后来发现是on()方法的特性引起的问题。

简单还原一下问题的场景

这里简单还原一下问题的场景,使用一个按钮给另一个按钮通过on()方法绑定事件。

HTML的部分

<input id="bindEventBtn" type="button" value="给按钮绑定事件的按钮" />
<input id="noEmotionBtn" type="button"  value="我是一个莫得感情的按钮" />

JavaScript的部分

$(function(){
    $('#bindEventBtn').click(function () {
        $('#noEmotionBtn').on('click', function () {
            alert('我是一个莫得感情的按钮');
        });
    });
})

这样,当多次点击bindEventBtn按钮,就会将同一个事件多次绑定到noEmotionBtn按钮上。

而on()方法的一个特性是绑定了多少次就触发多少次的,这就是问题所在。

问题的解决方法

解决问题的方法有两个,大体就是对重复绑定的事件进行解绑。

1.使用off()方法解绑。

$('#noEmotionBtn').off('click').on('click', function () {
    alert('我是一个莫得感情的按钮');
});

2.使用unbind()方法解绑。

$('#noEmotionBtn').unbind('click').on('click', function () {
    alert('我是一个莫得感情的按钮');
});

总结

实际的场景可能会复杂得多,因此在使用on()方法给元素绑定事件的时候要格外注意多次重复绑定的问题。

但是解决问题的大体思路是一样的,建议是统一先使用off()方法去解绑事件,避免出错。

当然了,最好是从根源上找到问题,也就是避免多次绑定事件的事情发生。

另外的,如果要给一个元素在多个地方绑定不同的事件处理函数的话,可能就要另外想想办法了。

linux
相关资讯       jQuery on()方法 
本文评论   查看全部评论 (0)
表情: 表情 姓名: 字数

       

评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款