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都只输出一次了。


部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！