Question

我有一个表单，允许管理员个人编辑或“删除”库存中的项目。该项目实际上并未从库存中删除，只是将其从活动库存中删除。当用户按下“删除”按钮时，会出现一个Bootstrap“警告”框，并希望验证从活动库存中删除的操作。该框有两个按钮“删除”和“保持”。单击可隐藏确认框。如果用户单击“删除”，代码也会按预期工作，但是如果用户单击“保留”，然后再决定再次尝试“删除”，则显示警告框并确认“删除”，然后将ajax表单提交为很多时候，按下确认框中的“保持”和“删除”按钮，代码中断会产生不需要的结果。不需要的结果是：短语“数据库错误，XX-XX.XX.XX-XX尚未更新。”按下“保持”的次数，然后“XX-XX.XX.XX-XX已成功从活动库存中删除”。模态背景不会消失，有时会出现不允许的模态。唯一的方法是刷新页面。但是项目被“删除”并且数据库IS被更新。

$('#myModal')
.on('click', 'button[name="del_but"]', function () {
    var ref = $(this).val();
    $('.del_bx').show('slow');
    $('#save').prop('disabled', true);
    $('.del_bx').on('click', '.btn', function () {
        var clkd = $(this).text();
        $('#save').prop('disabled', false);
        $('.del_bx').hide('slow');
        if (clkd === "Remove") {
            $.ajax({
                type: $('#group')
                    .attr('method'),
                url: "update.php",
                dataType: "json",
                data: $('#group')
                    .serialize() + '&update=del&id=' + ref,
                beforeSend: function () {
                    $(".loading")
                        .css("display", "block");
                    $(".btn")
                        .prop('disabled', true);
                },
                complete: function () {
                    $(".loading")
                        .hide();
                    $(".btn")
                        .prop('disabled', false);
                }
            })
            .done(function (data) {
                var phrase;
                if (data === 1) {
                    phrase = '<p class="success_mod" style="color:#000000; font-weight:bold; font-size:1em; text-align:center;">' + ref + ' has been successfully removed from the active inventory.</p>';
                } else if (data === 2) {
                    phrase = '<p class="success_mod" style="color:#000000; font-weight:bold; font-size:1em; text-align:center;">You are not authorized!</p>';
                } else {
                    phrase = '<p class="success_mod" style="color:#000000; font-weight:bold; font-size:1em; text-align:center;">Database error, ' + ref + ' has NOT been updated.</p>';
                }
                $('.modal-header ul.nav-tabs').fadeOut(2000);
                $('.modal-body .tab-content').fadeOut(2000);
                $('.modal-footer').fadeOut(2000);
                $(phrase).insertAfter('#myModal .modal-body img');
                setTimeout(function () {
                    $('#myModal').modal('toggle');
                    update_inv("in");
                }, 3000);
                setTimeout(function () {
                    $(".success_mod").remove();
                }, 6000);
            });
        }
    });
});

和html

<form id="group" class="form-horizontal" method="post">
    <fieldset>
        ...form stuff here...
        <div class="control-group">
            <label class="control-label" for="save"></label>
            <div class="controls" style="text-align:center;"><br>
                <button type="submit" id="save" name="save" value="AR-02.09.16-00" class="btn btn-keep">Save</button>
                <button type="reset" class="btn btn-default">Reset</button>
                <button type="button" id="del_but" name="del_but" class="btn btn-success" value="AR-02.09.16-00">Delete</button>
                <div class="alert alert-danger fade in del_bx" role="alert">
                    <div style="text-align:left;">
                        <strong>Confirmation Needed!</strong>
                    </div>
                    <p style="font-size:1em; text-align: center;">Remove AR-02.09.16-00 from the active Rolling Stock?<br>Click REMOVE<br>or<br>KEEP Active.</p>
                    <div style="text-align:left;">
                        <button type="button" class="btn btn-success btn-sm">Remove</button>
                        <button type="button" class="btn btn-keep btn-sm">Keep</button>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
</form>

Answer 1

您在 $（＆＃39; #myModal＆＃39;）点击处理程序中注册 del_bx 点击处理程序。只要单击 #myModal ，就会有效地注册一个额外的单击处理程序，并且在单击 del_bx 时调用所有这些处理程序。

移动 $（＆＃39; .del_bx＆＃39;）。on（）点击 $（＆＃39; #myModal＆＃39;）之外的处理程序注册。 on（）点击处理程序注册。

Jquery多按钮按下多次提交ajax

1 个答案: