zoukankan      html  css  js  c++  java
  • jquery使用on()方法绑定的事件被执行多次的问题

    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()方法去解绑事件,避免出错。

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

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

    "当一个人用心去创造一样东西时,它便有了灵魂。"

  • 相关阅读:
    JZOJ 3845. 简单题(simple)
    JZOJ 3844. 统计损失(count)
    JZOJ 3843. 寻找羔羊(agnus)
    JZOJ 3833. 平坦的折线
    JZOJ 1956. 矩形
    JZOJ 3832. 在哪里建酿酒厂
    mysql 语法一 :case when详解
    阿里云推荐码
    redis配置文件详解(转)
    压力测试工具 webbench总结
  • 原文地址:https://www.cnblogs.com/yanggb/p/11345188.html
Copyright © 2011-2022 走看看