事情是这样子的,CSS
框架采用Bootstrap
由于每个页面会用到确认框组件,所以我将Boostrap
模态框封装了一下。然后,点击确认按钮会执行function
也就是说第一次没有问题。但第二次调用时,问题就出现了,点击确认会执行两次,而且第一次执行的是第一次的function
,第二次执行才是当次传入的function
。以此类推,第三次会执行前两次的function
不太明白为什么会这样子,望大神指点一下
//base.js
$package('BASE');
var BASE= {
confirm : function(msg, confirmCall, cancelCall) {
$('#confirm-msg').html(msg);
$('#confirm-win').modal({backdrop : 'static', keyboard : false, show : true});
$('#confirm-win').find('#btn-confirm').click(function() {
$('#confirm-win').modal('hide');
if (confirmCall) {
confirmCall();
}
});
$('#confirm-win').find('#btn-cancel').click(function() {
$('#confirm-win').modal('hide');
if (cancelCall) {
cancelCall();
}
});
}
};
/*以jQuery方式扩展*/
jQuery.loading = function(){
var c_html = '<div id="confirm-win" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="confirm-win-label" >' +
'<div class="modal-dialog modal-sm" role="document">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<h5 class="modal-title" id="confirm-win-label">请确认</h5>' +
'</div>' +
'<div id="confirm-msg" class="modal-body"></div>' +
'<div class="modal-footer">' +
'<button id="btn-confirm" type="button" class="btn btn-danger btn-sm">确定</button>' +
'<button id="btn-cancel" type="button" class="btn btn-default btn-sm">取消</button>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
$('body').append(c_html);
};
//页面js
$(function() {
//初始化组件
$.loading();
//调用组件
BASE.confirm('确认要执行吗?', function(){ …… }, function(){ …… });
});
并不是缓存事件,是每一次点击出现弹窗的时候都会给确定取消按钮绑定一次事件,是绑定了多个事件函数的问题,可以每次先解绑click事件,再绑定 建议使用 on/off 来绑定/解绑事件