js点击事件多次触发问题

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

$('.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);

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