Question

请帮我解决我的问题！我有一个带有boostrap3模式的页面，里面有表格。＆＃34;保存＆＃34;这个模式中的按钮发送AJAX查询，如果成功，我触发＆＃34;隐藏＆＃34;我的模态的事件，像这样：

success: function (data) {
            PERSON_AJAX.updatePersonsTable(data);
            $('#custom-width-modal-person').modal('hide');
            $('#person-created-alert').modal('show');
        },

我还检查我要更改的表单，我在open事件上序列化表单，然后检查它是否等于hide事件上的序列化表单（当用户关闭模态而不点击＆＃34;保存＆＃34;），询问用户如果他想保存更改，如果它是真的我手动拨打我的＆＃34;保存＆＃34;功能如下：

form_serialize: function(){
    $("#custom-width-modal-person").on({
        'shown.bs.modal': function(){
            MODAL_BEHAVIORS.formData = $('#create-person').serialize();
        },
        'hide.bs.modal': function(e){
            if ( MODAL_BEHAVIORS.formData !== $('#create-person').serialize() ){
                if(confirm("Do you want to save the data?")){
                    PERSON_AJAX.setPerson();
                }
            }
        },
    });

},

这里的问题是setPerson（）方法还包含hide.bs.modal事件，当用户想要通过关闭模式来保存数据时，函数调用两次。如何防止这种互动？

Answer 1

你不应该在hide.bs.modal中检查这个。保留模态隐藏事件处理程序emtpy。将此逻辑放入单独的函数中：

function closeModal(){
    if ( MODAL_BEHAVIORS.formData !== $('#create-person').serialize() ){
        if(confirm("Do you want to save the data?")){
            PERSON_AJAX.setPerson();
        }
        else{
            $('#custom-width-modal-person').modal('hide');
        }
    }
}

当用户点击X，按下转义或每当您想要关闭模式时，请致电closeModal()。

与js的bootstrap模态交互

1 个答案: