javascript - Button缓存前几次绑定的事件？

问题描述

问 题

事情是这样子的，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 来绑定/解绑事件

这篇关于javascript - Button缓存前几次绑定的事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！