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

Question

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

这里是 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></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 请求重新加载后隐藏了微调器。