我爱模板网封装了一个简单的弹窗事件,弹窗点击确定时,会有一个回调,代码片段如下:
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都只输出一次了。