Javascript Jquery/Ajax/CSS使用Ajax在formsubimit之后显示/隐藏div

在使用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”）.fadeOut（“slow”）.load（'/inst/stud/resources/getpackages？inst#id={{inst.id}}和stud_id={{stud.id}'）.fadeIn（'slow'）；

/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();

});

$（文档）.ready（函数（）{
$（“#删除_包”）。在（'submit'，函数（事件）{
$.ajax({
数据：{
螺柱id:$（'#螺柱id'）.val（），
pck_id:$（'#pck_id'）.val（）
},
键入：“POST”，
url:“{url}for（'mod_inst_stud.delete_package2'）}”
})
.完成（功能（数据）{
if（data.error）{
$（'#errorAlert'）.text（data.error）.show（）；//IGNORE还没有到这一步
$（'#successAlert'）.hide（）；//IGNORE还没有走到这一步
}
否则{
$（“#inst#stud_resources_getpackages”）.hide（）；//似乎什么都不做
$（“#inst#stud_resource_change_success”）.show（）；//从不显示Index.html上的div
$（“#inst#stud_resource_change_success”）.delay（3200）.hide（）//从不隐藏，因为它从不显示。。
$（“#inst#stud_resources_getpackages”）.load（'/inst/stud/resources/getpackages？inst_id={{{inst.id}}}&stud_id={{stud.id}}。）show（）；//这似乎有效，因为index.html中的div是用getpackages.html中的新内容更新的
}
});
event.preventDefault（）；
});

}))；

知道发生了什么事吗？我在web开发方面并不是很在行，我的背景更多的是python/flask，而不是Jquery/Ajax/CSS。

我找到了解决方案

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（）中添加一个动画，以延迟它以正确的方式加载。现在似乎工作得很好。

我找到了解决办法

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（）中添加一个动画，以延迟它以正确的方式加载。现在似乎工作得很好。

这还不清楚。bud

我在使用Ajax发布表单后出现了一个显示隐藏DIV的问题，您需要说明您现在正在做什么，以及到目前为止已经做了什么您是否确定您的事件处理程序绑定到了
#delete_package
？我不知道
#delete_package
在HTML中的位置，但是如果它是
#inst_stud_resources_getpackages
的子项，那么您的事件处理程序就不会绑定。我建议使用浏览器的开发人员工具在代码中设置断点。这样，您就可以准确地看到哪些代码正在被访问，哪些代码没有被访问。嗯，发生的是。。在表单提交之后，我将一些JSON返回到Ajax，以了解它是成功提交还是失败，如果成功，我想显示一个DIV，持续5秒钟，表示它成功。目前，我上面的代码在返回successful时根本没有显示DIV。它所做的一切就是重新加载内容，但我希望在显示成功的DIV之后，该内容放在最后。是的，我知道#delete_包是绑定的，因为else语句的最后一行是有效的。它将新内容重新加载到DIV中，但它前面的3行似乎什么都没有做。我不知道为什么..我想ajax会返回错误。else语句中的最后一行不执行。相反，该文档由以下脚本加载$（“#inst_stud_resources_getpackages”）.fadeOut（“slow”）.load（'/inst/stud/resources/getpackages？inst_id={{{inst.id}}&stud id={{stud id}'）.fadeIn（“slow”）；这很不清楚bud
我在用Ajax发布表单后遇到了一个显示隐藏DIV的问题，你需要说明你现在正在做什么以及你到目前为止做了什么你确定你的事件处理程序绑定到了
#delete_包
？我不知道
#delete_package
在HTML中的位置，但是如果它是
#inst_stud_resources_getpackages
的子项，那么您的事件处理程序就不会绑定。我建议使用浏览器的开发人员工具在代码中设置断点。这样，您就可以准确地看到哪些代码正在被访问，哪些代码没有被访问。嗯，发生的是。。在表单提交之后，我将一些JSON返回到Ajax，以了解它是成功提交还是失败，如果成功，我想显示一个DIV，持续5秒钟，表示它成功。目前，我上面的代码在返回successful时根本没有显示DIV。它所做的一切就是重新加载内容，但我希望在显示成功的DIV之后，该内容放在最后。是的，我知道#delete_包是绑定的，因为else语句的最后一行是有效的。它将新内容重新加载到DIV中，但它前面的3行似乎什么都没有做。我不知道为什么..我想ajax会返回错误。else语句中的最后一行不执行。相反，该文档由以下脚本加载$（“#inst_stud_resources_getpackages”）.fadeOut（“slow”）.load（'/inst/stud/resources/getpackages？inst_id={{{inst.id}}&stud id={{stud id}'）.fadeIn（“slow”）；