jQuery 开始/停止序列只工作一次

Question

我已经为.ajaxStart和.ajaxStop编写了一个jQuery序列。 它也完全按照我想要的方式工作(经过多次试验和错误(，但现在它只能工作一次，如果不重新加载页面，它将无法再次工作。

我认为这是一个非常简单明了的序列，但我错了吗？我什至不知道在这一点上该尝试什么，我已经在努力理解问题是什么。

我尝试过使用和不使用队列，文本而不是html，将回调添加到slideUp而不是队列，id而不是类。已尝试不清空帖子消息。而且仍然..每次都做同样的事情，如果我两次提交同样的东西，它就行不通了。我必须刷新页面才能使其再次工作。

它需要以非常特定的顺序触发，因为我一次只希望显示一个"事物"，无论是表单、加载器还是消息。

我真的希望有人能发现我做错了什么，或者能为我指出正确的方向。将不胜感激！

jQuery/AJAX

$(document).ajaxStart(function(){
$(".post-form").slideUp(250, function(){
$(".post-loader").fadeIn(250);
});
});
$(document).ajaxStop(function(){
$(".post-loader").finish().fadeOut(250, function(){
$(".post-message").slideDown(250).delay(5000).slideUp(250).queue(function(){
$(this).empty();
$(".post-form").slideDown(250);
});
});
});
$("#add_newblog").click(function(){
$.post("users/add_blog.php",
{
blogtitle:   $("#add_blogtitle").val(),
blogdate:    $("#add_blogdate").val(),
blogcontent: $("#add_blogcontent").val()
},
function(data){
$(".post-message").text(data);
});
});

.HTML

<div class="modal fade" id="user-blog-add">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">New Post</h4>
<button class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<!-- SERVER LOADING -->
<div class="alert alert-primary mt-2 post-loader" style="display:none;">
<div class="d-flex justify-content-center">
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
<div class="alert alert-primary mt-2 text-center post-message" style="display:none;">
<!-- SERVER RESPONSE -->
</div>
<!-- SERVER AJAX FORM -->
<div class="post-form" role="form">
<div class="form-group">
<label for="add_blogtitle">Post Title</label>
<input type="text" class="form-control" id="add_blogtitle" name="add_blogtitle" maxlength="255" placeholder="My blog title...">
<small class="form-text text-muted">Must be less than 255 characters, and contain only letters and/or numbers.</small>
</div>
<div class="form-group">
<label for="add_blogdate">Post Date</label>
<input type="text" class="form-control" id="add_blogdate" name="add_blogdate" placeholder="YYYY-MM-DD">
<small class="form-text text-muted">Select a date, or insert your own date in a YYYY-MM-DD format.</small>
</div>
<div class="form-group">
<label for="add_blogcontent">Post Content</label>
<textarea class="form-control" id="add_blogcontent" name="add_blogcontent" rows="4" placeholder="My new blog post..."></textarea>
<small class="form-text text-muted">Basic HTML entities are aloud with no attributes, up to and including: Paragraphs, Lists, Italics, and Bold.</small>
</div>
<button class="btn btn-secondary btn-block w-50 mx-auto" id="add_newblog">Submit</button>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-dismiss="modal" type="button">Close</button>
</div>
</div>
</div>
</div>

在我看来，动画在第二次提交时.ajaxStop中途停止。后加载程序淡出，但随后消息不显示，表单也不会滑出。

我的 PHP 没有抛出任何错误，这仍然肯定适用于第二次提交，只是 jQuery 序列第二次失败。

Answer 1

该问题是由queue调用引起的。可以通过将回调移动到slideUp方法来修复它：

$(document).ajaxStart(function () {
$(".post-loader").fadeIn(250);
$(".post-form").slideUp(250);
});
$(document).ajaxStop(function () {
$(".post-loader").finish().delay(2000).fadeOut(250, function () {
$(".post-message").slideDown(250).slideUp(250, function () {
$(this).empty();
$(".post-form").slideDown(250);
});
});
});
$("#add_newblog").click(function () {
$.post("test",
{
blogtitle: $("#add_blogtitle").val(),
blogdate: $("#add_blogdate").val(),
blogcontent: $("#add_blogcontent").val()
},
function (data) {
$(".post-message").text(data);
});
});

更改部分：

老：

$(".post-message").slideDown(250).delay(5000).slideUp(250).queue(function(){
$(this).empty();
$(".post-form").slideDown(250);
});

新增功能：

$(".post-message").slideDown(250).delay(5000).slideUp(250, function(){
$(this).empty();
$(".post-form").slideDown(250);
});