javascript - Jquery/Ajax/CSS 在使用 Ajax 提交表单后显示/隐藏 div

Question

使用 Ajax 发布表单后，我遇到显示隐藏 DIV 的问题。设置就像这样；

index.html - 我的内容和表单从资源页面加载到 div 中

<div id="inst_stud_resource_change_success" style="display: none;">
            <div class="greenbox">
            Deleted!
            </div>
        </div>
        <div id="inst_stud_resources_getpackages">
            <script type="text/javascript">
                $("#inst_stud_resources_getpackages").fadeOut("slow").load('/inst/stud/resources/getpackages?inst_id={{ inst.id }}&stud_id={{ stud.id }}').fadeIn('slow');
            </script>
        </div>

/inst/stud/resources/getpackages.html - 此页面具有表单，以及 index.html 上的 DIV 所需的内容

Jquery 的使用方式与 getpackages.html 类似；

<script type="text/javascript">
$(document).ready(function() {

$('#delete_package').on('submit', function(event) {

    $.ajax({
        data : {
            stud_id : $('#stud_id').val(),
            pck_id : $('#pck_id').val()
        },
        type : 'POST',
        url : '{{ url_for('mod_inst_stud.delete_package2') }}'
    })
    .done(function(data) {

        if (data.error) {
            $('#errorAlert').text(data.error).show(); // IGNORE haven't gotten this far
            $('#successAlert').hide(); // IGNORE haven't gotten this far
        }
        else {
            $("#inst_stud_resources_getpackages").hide(); // doesn't seem to do anything
            $('#inst_stud_resource_change_success').show(); // never shows the div on Index.html
            $('#inst_stud_resource_change_success').delay(3200).hide(); // never hides, since it is never shown..
            $("#inst_stud_resources_getpackages").load('/inst/stud/resources/getpackages?inst_id={{ inst.id }}&stud_id={{ stud.id }}').show(); // this seems to work since the div from index.html is updated with the new content from getpackages.html
        }

    });

    event.preventDefault();

});

});

有什么想法吗？我不太擅长 Web 开发，我的背景更多是 python/flask，而不是 Jquery/Ajax/CSS。

Answer 1

我找到了解决方案..

else {
            $("#inst_stud_resources_getpackages").hide();
            $('#inst_stud_resource_change_success').fadeIn(1000);
            $('#inst_stud_resource_change_success').delay(2600).fadeOut(3500);
            $("#inst_stud_resources_getpackages").delay(7200).fadeIn().load('/inst/stud/resources/getpackages?inst_id={{ inst.id }}&stud_id={{ stud.id }}');
        }

显然Jquery中有一个队列，但是.load()总是会排在前面。所以它否定了我的通话顺序。我必须移动一些行，并向 .load() 添加动画，以延迟其正确加载。现在看来运行良好。