我不得不单击两次以使用jquery隐藏模态后打开模态

Question

我想在modal（id = modal_add_item）中使用表单添加新数据，并在不刷新页面的情况下重新加载相关的数据表。我使用$ .post（）将数据发布到特定页面。但是，模态并没有消失。因此，我尝试了Google搜索，并找到了解决方案。经过密集的搜寻，我找到了这些人：

$('#modal_add_item').hide();
$('.modal-backdrop').remove();
$('#form_add_item')[0].reset();

然后我尝试将其应用到我的代码中：

$('#form_add_item').submit(function(event) {
    event.preventDefault();
    var button = $("#btn_add_item");
    var post_url = $(this).attr('action');
    var form_data = $(this).serialize()
    + '&' + encodeURI(button.attr('name'))
    + '=' + encodeURI(button.attr('value'));

    $.post(post_url, form_data, function(response) {
        if(response.includes("msgE")) {
            swal(
                'Error!',
                response.replace("msgE", ""),
                'error'
            )
        } else {
            swal(
                'Success!',
                response.replace("msg", ""),
                'success'
            )
        }

        $('#modal_add_item').hide();
        $('.modal-backdrop').remove();
        $('#form_add_item')[0].reset();
        func_reload();
    });
});

它运行完美。.直到我需要在该过程之后立即插入另一个数据。必须单击两次按钮才能打开专用模式。在这里，如果您需要查看我的代码按钮

<button type="button" class="btn btn-sm btn-amber" data-toggle="modal" data-target="#modal_add_item">Add New Item</button>

我需要的是：-

• 单击提交按钮后消失的模式。
• 要从模式中删除的已提交数据。
• 在发布ajax响应之后，显示警报（在这种情况下，我使用了甜蜜警报）并处于焦点状态
• 刷新了数据表（使用了ajax.reload（））
• 在完成所有上述过程后，没有两次单击以打开模态

image of twice clicking-GIF

Answer 1

我从these question找到了答案它和我的问题几乎一样它使用.then()（专注于swal警报），然后使用$('#modal_add_item').modal('hide')而不是$('#modal_add_item').hide()

Answer 2

To open a modal $('#modal_add_item').modal('show'); use $('#id').modal('show' or 'hide')

$('#modal_add_item').modal('hide'); 
$('.modal-backdrop').remove();
$('#form_add_item')[0].reset();