时间戳

首页 > 解决方案 > jQuery 开始/停止序列只工作一次

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

问题描述

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

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

我尝试过使用和不使用队列，文本而不是 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 序列第二次失败。

标签： jqueryhtmlajax

解决方案

问题是由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);
            });

推荐阅读