首页 > 建站教程 > JS、jQ、TS >  jQuery重复绑定事件正文

jQuery重复绑定事件

    我爱模板网封装了一个简单的弹窗事件,弹窗点击确定时,会有一个回调,代码片段如下:
okBtn.click(function(){
    if(typeof o.okFn == 'function'){ o.okFn(res) }
    layerBg.removeClass(o.showClass);
})
    可是在实际使用过程中,发现了一个问题,首先看下调用代码:
$('.order-details').on('click','.print-order',function(){
    var buf = $(this).attr('buf');
    $.fkDrag({
        type : 'confirm',
        maskBg : '.alert-layer',
        tips : '确定打印订单?',
        okFn : function(){
            console.log(buf);  //重复输出
        }
     });
})
    注意这句:
console.log(buf);
    当我点第一次击确定时,这句话输出一次,当点击第二次时,这句话却只行了两次,以此类推。估计是click事件的重复绑定导致的,每执行一次,okBtn就会被绑定一次click,所以,要解绑事件,jQuery提供了unbind方法,很好用,修改代码如下:
okBtn.click(function(){
    if(typeof o.okFn == 'function'){ o.okFn(res) }
    layerBg.removeClass(o.showClass);
    //解绑click
    onBtn.unbind('click');
})
      经测试,下面的解除绑定更好点:
okBtn.unbind('click').click(function(){
    if(typeof o.okFn == 'function'){ o.okFn(res) }
    layerBg.removeClass(o.showClass);
})
     再次调用,无论点击多少次,console都只输出一次了。