javascript - Bootstrap 模式不适用于循环场景

Question

我正在尝试在我的 javascript 中为 ajax 创建通用方法，但 Bootstrap 模式未按预期工作。

HTML:

<div class="modal fade" id="consult_modal_v2" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div style="background-color: #dc3d3e;color: #fff;height:85px !important;;" class="modal-header">
                <div>
                    <div class="row">
                        <div class="col-md-11">
                            <h4 id="message_v2" style="text-align:center;margin-top: 10px;"></h4>
                        </div>
                    </div>
                </div>
                <button id="con_close1_v2" type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button>
            </div>
            <div class="container"></div>
            <div class="modal-body">

                <div class="col-md-12" style="margin-top:3%;margin-bottom:2%;">

                    <div class="col-md-3" id="con_uname_v2" style="margin-top:11px">Admin Username</div>
                    <div class="col-md-9"><input type="text" id="con_sect_name_v2" class="form-control"></div>
                    <div class="col-md-3" id="con_pass_v2" style="margin-top:11px">Admin Password</div>
                    <div class="col-md-9"><input type="password" id="con_sect_pass_v2" class="form-control"></div>

                </div>

            </div>
            <div style="border:none;" class="modal-footer" >
                <button class="btn btn-default" id="con_close_v2" style="margin-top:3%;">Cancel</button>
                <button class="btn btn-default" id="con_sect_ok_v2" style="margin-right:2%;margin-top:3%;">Override</button>
                <button class="btn btn-default" id="con_upd_sect_ok_v2" style="display:none;margin-right:2%;margin-top:3%;">Override</button>

            </div>
        </div>
    </div>
</div>

JavaScript:

执行为

generalised_ajax('post_url',
    {
        'sub_id': sub_id,
        'status': status,
        '_token': csrf_token
    }, "POST", function () {
        console.log('success placing apt');
    }, {},
    function () {
        console.log('apt cancelled');
    }, {});

function generalised_ajax(url, data, type, post_success, post_success_params, post_cancel, post_cancel_params) {
    $.ajax({
        url: url,
        data: data,
        type: type,
        headers: {Accept: "application/json"},
        dataType: 'json',
        success: function (result, status, xhr) {
            post_success(post_success_params);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            if (xhr.responseJSON.type === "confirmation") {
                responseProcess = xhr.responseJSON;
                generalised_confirm(responseProcess.message, {
                    url: url,
                    data: data,
                    type: type,
                    post_success: post_success,
                    post_success_params: post_success_params,
                    post_cancel: post_cancel,
                    post_cancel_params: post_cancel_params
                }, responseProcess.config_name);
            } else if(xhr.responseJSON.type === "admin_auth"){
                generalised_authentication(responseProcess.message, {
                    url: url,
                    data: data,
                    type: type,
                    post_success: post_success,
                    post_success_params: post_success_params,
                    post_cancel: post_cancel,
                    post_cancel_params: post_cancel_params
                });
            }
        }
    });
}

function generalised_confirm(message, data, config_name) {
    var r = confirm(message);
    if (r === true) {
        data.data[config_name] = true;
        generalised_ajax(data.url, data.data, data.type, data.post_success, data.post_success_params, data.post_cancel, data.post_cancel_params);
    } else {
        data.post_cancel(data.post_cancel_params);
    }
}

var modelX = $("#consult_modal_v2");
function generalised_authentication(message, data){
    var uname = $("#con_sect_name_v2");
    var pass = $("#con_sect_pass_v2");
    $("#message_v2").val(message);
    modelX.modal('toggle');
    $("#con_sect_ok_v2").click(function(event){
        modelX.modal('toggle');
        data.data['a_uname'] = uname.val();
        data.data['a_pswd'] = pass.val();
        uname.val('');
        pass.val('');
        generalised_ajax(data.url, data.data, data.type, data.post_success, data.post_success_params, data.post_cancel, data.post_cancel_params);
    });
    $("#con_close_v2").click(function(event){
        modelX.modal('toggle');
        data.post_cancel(data.post_cancel_params);
    });
}

预期场景:

1. 发送ajax
2. 服务器响应 admin_auth 错误
3. 打开模式
4. 输入管理员信用信息(错误)
5. 关闭模式
6. 发送ajax
7. 服务器响应 admin_auth 错误
8. 从第 3 阶段重复

目前运作如何

1. 发送ajax
2. 服务器响应 admin_auth 错误
3. 打开模式
4. 输入管理员信用信息(错误)
5. 关闭模式
6. 发送ajax

现在服务器使用与第 2 点相同的 ajax 进行响应。但模态不会再次打开。 它与 JavaScript 确认弹出窗口一起工作正常。

更新:

当我从模态中删除淡入淡出类后，它每次都开始出现。但现在它发送的 ajax 是之前尝试的两倍。 比如第一次一次，第二次两次，第三次4次，第四次8次等等。

Answer 1

我不知道这种行为的原因是什么，但是 改变

$("#con_sect_ok_v2").click(function(event){
        modelX.modal('toggle');
        data.data['a_uname'] = uname.val();
        data.data['a_pswd'] = pass.val();
        uname.val('');
        pass.val('');
        generalised_ajax(data.url, data.data, data.type, data.post_success, data.post_success_params, data.post_cancel, data.post_cancel_params);
    });

到

$("#con_sect_ok_v2").one('click',function(event){
        modelX.modal('toggle');
        data.data['a_uname'] = uname.val();
        data.data['a_pswd'] = pass.val();
        uname.val('');
        pass.val('');
        generalised_ajax(data.url, data.data, data.type, data.post_success, data.post_success_params, data.post_cancel, data.post_cancel_params);
    });

解决了。

制作人员 https://stackoverflow.com/a/3393694/2598994