模式不会关闭 ajax 成功

Question

我正在使用 ajax 加载模式的内容。我有一个提交模式表单的按钮，并且假设在处理完 ajax 提交后关闭模式，以便它可以更新页面底部的表格。在我更新表格并调用$('modal-container').modal('hide');后，它没有关闭模式

此模式包含一个带有分页的表格。在 'loaded.bs.modal' 事件中，我将所有具有 modal-pagination-link 类的链接转换为 ajax 链接。我使用的分页库只允许传入链接的 url 和参数，这就是为什么我在加载它们之后进行链接转换的原因。当您单击其中一个链接时，它会更新表格。为了防止模态本身在您单击我称为$(this).removeData('bs.modal'); 的链接后关闭。我发现这个$(this).removeData('bs.modal'); 是阻止任何$('#modal-container').modal('hide'); 工作的原因。

如何防止在模式中单击链接时关闭模式并仍然允许.modal('hide') 仍然有效？我可以用什么来代替$(this).removeData('bs.modal')？

$(function () {
// Initialize modal dialog
// attach modal-container bootstrap attributes to links with .modal-link class.
// when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog.
$('body').on('click', '.modal-link', function (e) {
    e.preventDefault();
    $(this).attr('data-target', '#modal-container');
    $(this).attr('data-toggle', 'modal');
    $('#modal-container').draggable();
    var updateTarget = $(this).attr('data-ajax-update');
    $('modal-update-target').attr('value', updateTarget);
});
// Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
$('body').on('click', '.modal-close-btn', function () {
    $('#modal-container').modal('hide');
});
//clear modal cache, so that new content can be loaded
$('body').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');
    $('modal-update-target').removeAttr("value");
});

$('#modal-container').on('click', '.modal-pagination-link', function (e) {
    var updateTarget = $(this).attr('data-ajax-update');
    $('modal-update-target').attr('value', updateTarget);
});

$('#modal-container').on('loaded.bs.modal', function () {
    $(this).removeData('bs.modal');
    $('modal-update-target').removeAttr("value");
    var pagcontainers = $(this).find('#modal-pagination');
    var hrefs = $(pagcontainers).find('a').addClass('modal-pagination-link')
                                            .attr('data-ajax', 'true')
                                            .attr('data-ajax-mode', 'replace')
                                            .attr('data-toggle', 'modal')
                                            .attr('data-target', '#modal-container')
                                            ;

});

$('#modal-container').on('submit', '#asset-modal-frm', function (e) {
    e.preventDefault();
    if (confirm("Are you sure?")) {
        var data = $(this).serializeArray();
        $.ajax({
            url: '/licenses/allocate',
            type: 'POST',
            data: data,

            success: function (data) {
                for (var i = 0; i < data.length ; i++) {
                    $('#allocatedLicenses tr:last').after(
                    $("<tr>").append($("<td>").text(data[i].name))
                                    .append($("<td>").text(data[i].manufacturerItem.serialNumber)));
                }
                $('#modal-container').modal('hide');
            }
        })
    }
});
});

我的html：

    <div id="modal-container" class="modal fade" tabindex="-1" role="dialog">
        <input id="modal-update-target" type="hidden"/>
        <div class="modal-dialog">
            <div class="modal-content center-block" style="display: table;">
            </div>
        </div>
    </div>

Answer 1

您使用了错误的方法来隐藏元素。

改变这个：

$('#modal-container').modal('hide');

到这里：

$('#modal-container').hide();

或者，如果您想将其从页面中完全删除，请将其更改为：

$('#modal-container').remove();