美文网首页
js点击事件多次触发问题

js点击事件多次触发问题

作者: jacklin1992 | 来源:发表于2016-11-22 13:46 被阅读4915次

    今天遇到了又一个神奇的问题,起因是做一个开启禁用功能的按钮,先给按钮定义事件。

    $('.pro_on').click(project.proTurnOff);
    $('.pro_off').click(project.proTurnOn);
    

    在这开启事件函数中这样写,禁用事件同理。

    //开启按钮事件
    Project.prototype.proTurnOn = function(){
        pro_id = $(this).attr('id');
        var This = $(this);
        $.ajax({
            url:'/project_user/'+pro_id+'/edit',
            type:'get',
            data:{
                disable:0
            },
            beforeSend:function(){
                $('.loading').show();
            },
            success:function(data){
    
                if(data.status==200){
                    This.html('禁用');
                    This.removeClass('pro_off').addClass('pro_on');
                    alert('修改为开启');
                    $('.pro_on').click(project.proTurnOff);
                    $('.pro_off').click(project.proTurnOn);
                }
            }
        })
    };
    

    这里需要注意,修改class之后,前面定义的事件失效了,需要重新定义才生效。但是这个时候,神奇的事情发生了,点击前几次的时候,开启禁用功能都正常,但是当从第四次点击开始,每点击一次,就相当于点击了n+1次,时间触发的次数越来越多,后经大师(兄弟会--王飞龙)指点,需要在重新定义点击时间之前,先取消之前的事件绑定。因此,修改如下

    $('.pro_on').click(project.proTurnOff);           
    $('.pro_off').click(project.proTurnOn);
    

    修改为:

    $('.pro_on').off("click").click(project.proTurnOff);
    $('.pro_off').off("click").click(project.proTurnOn);
    

    像往常一下,不知道为什么,但是,解决了。

    相关文章

      网友评论

          本文标题:js点击事件多次触发问题

          本文链接:https://www.haomeiwen.com/subject/nkippttx.html