Spinner 在按下按钮时第一次显示，但是在第二次按下按钮时无法显示？

Question

我试图在按下按钮时显示 'loading' 微调器。所以基本上当页面第一次加载时，微调器是隐藏的。当用户填写表单并按下按钮时，将显示 'loading' 微调器并将 post 请求发送到后端服务器。服务器发回响应后，随着 POST 请求的响应重新加载页面，微调器再次隐藏。这按预期工作。然而，现在问题来了。如果用户再次填写表单并点击按钮，一切都会像以前一样发生，但是，这次 'loading' 微调器不会出现。

这里是 jquery:

$(document).ready(function()
{
    console.log('ready');

    // Hide spinner on document load

    $("#spinner").hide();

    $("#answer").css({
        display: "block",
        visibility: "visible"
        });
        
    // When form submit button is clicked check the form is valid. If form is valid show spinner.
    $('#button-question').click( function(){
        if ( $('#form-question')[0].checkValidity() ){

            $("#answer").css({
                display: "none",
                visibility: "hidden"
                });
            

            $("#wiki-spinner").show();

            
        }
    });  
    
})

相关的 html 元素如下所示：

<form action="{% url 'xyz' %}" method="POST" enctype="multipart/form-data" class="form-horizontal" id="form-question">
    {% csrf_token %}
    <div class="form-group">
        <label for="name" class="control-label">Question</label>
        <input type="text" class="form-control" id="question" name="question" aria-describedby="wikiHelp" placeholder="{{question}}" value="{{question}}" required>
        <small id="wikiHelp" class="form-text text-muted small-text">Questions should be relevant to the article. </small>
    </div>

    <div class="form-group">                    
        <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3" style="margin-bottom:10px;">
            <button class="btn btn-success" id="button-question"> <span class="glyphicon glyphicon-upload" style="margin-right:5px;"></span>Ask Question</button>
        </div> 
    </div>
</form>
<!-- {% if show_wiki_spinner %} -->
<div class = "row justify-content-center h-100 w-100" id="spinner">
    <div class = "row justify-content-center h-100 w-100 d-table">
        <div class = "col w-100 text-center d-table-cell align-middle">
            <h1 class = "spinner-font">Loading!</h1>
            <div class="spinner-border text-success" role="status">
            </div>
        </div>
    </div>
</div>
<!-- {% endif %} -->
<div class="answer" id="answer">
</div>

Answer 1

我找到了答案。我在 jinja2 中使用 Django 模板。即使在注释掉 jinja2 变量之后仍然有效，它在 POST 请求重新加载后隐藏了微调器。

Spinner 在按下按钮时第一次显示，但是在第二次按下按钮时无法显示？

Spinner shows first time on button press, however fails to show when button is pressed second time?

javascript

jquery

spinner

hide

show