Question

在我的页面中，当使用模式框成功创建产品时，模式会消失效果，然后带有产品列表的页面应该刷新＆＃34;添加新项目。

然而，模态的消失效果会破坏动画的流程，因为项目列表过早加载。

我不想抛出随机数延迟。我想在动画结束后立即执行加载项目的功能。

我该怎么做？

$(document).on('click', '#create-battery', function(event) {
    event.preventDefault();
    $.post('/battery', $('#create-battery-form').serialize(), function(data) {
        if (data['status'] == true) {
            $('#errors').addClass('hidden');
            $('#success').removeClass('hidden');
            $('#success').html(data['message']);
            $('#add-new-battery').modal('hide'); // here is the hide effect
            renderBatteries(); // here is where all the products are loaded again in the list
        } else {
            $('#success').addClass('hidden');
            $('#errors').removeClass('hidden');
            $('#errors').html(data['errors']);
            $('#errors').addClass('top-buffer');
        }
    });
});

修改

现在，当调用我的renderBatteries()函数时，将呈现项目。但是这个功能的制作方式让我注意到消息消失了：

function renderBatteries(url, notice) {
    if (url === undefined || url === null) url = '/battery/all';
    $.get(url, function(data) {
            $('#content').empty();
            $('#content').append(data['view']);
            if (data['empty']) {
                $('#batteries-list').empty();
                $('#content').append('<div class="alert alert-info top-buffer col-md-6 col-md-offset-3 text-center">No batteries found in the database.</div>');
            }
        });
}

我尝试修复它添加最后一行：

if (notice) {
    $('#success').html(notice);
}

然而，通知会在短时间内出现然后消失。为什么会发生这种情况，如果我在>清空内容之后这样做了？

以下是它的样子：

function renderBatteries(url, notice) { if (url === undefined || url === null) url = '/battery/all'; $.get(url, function(data) { $('#content').empty(); $('#content').append(data['view']); if (data['empty']) { $('#batteries-list').empty(); $('#content').append('<div class="alert alert-info top-buffer col-md-6 col-md-offset-3 text-center">No batteries found in the database.</div>'); } if (notice) { $('#success').html(notice); } }); }

Answer 1

当模态完成隐藏时会触发一个事件。创建一个调用函数的监听器：

$('#add-new-battery').on('hidden.bs.modal', function (e) {
  renderBatteries();
});

点击此处的“活动”：http://getbootstrap.com/javascript/#modals-usage

完成之前的JavaScript函数的延迟执行

1 个答案: