事情是这样子的,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 = '' + '
' + '
' + '
请确认
' + '' + '' + ' ' + '' + '' + ''; $('body').append(c_html); };
//页面js $(function() { //初始化组件 $.loading(); //调用组件 BASE.confirm('确认要执行吗?', function(){ …… }, function(){ …… }); });
弹窗创建的多了吧
并不是缓存事件,是每一次点击出现弹窗的时候都会给确定取消按钮绑定一次事件,是绑定了多个事件函数的问题,可以每次先解绑click事件,再绑定 建议使用 on/off 来绑定/解绑事件