javascript - jQuery 没有正确隐藏/显示元素

Question

我的网页模板中有以下 html 和 jQuery 代码。

$.getJSON 调用可能需要一些时间，因此我想在加载数据时显示警告(带有 id="warning"的 div)，以便用户知道等待它。

代码正确验证了状态下拉列表，并将返回正确的表格数据，表格显示正常。

但是，当单击提交按钮时，警告段落不会出现，并且在加载数据时表格仍然可见。

如何让表格在加载数据时消失并同时显示警告？

  <div class="container-fluid">
  <form id="search_form">
      <div class="container-fluid">
          <div class="row">
              <div class="col-xs-4">
                  {{ render_field(form.status) }}
              </div>
              <div class="col-xs-4">
                  <input type="submit" value="Get Issues" id="submit">
              </div>
              <div class="col-xs-4">
              </div>
          </div>
          <div class="row">
              <div hidden="true" id="warning" class="col-xs-12 center alert alert-warning">
              <p>Data is loading, this might take a few seconds</p>
              </div>
          </div>
          <div class="row">
              <div id="errors" hidden="true" class="col-xs-12 center alert alert-danger">
              </div>
          </div>
      </div>
  </form>

  <script>
  var table;
  $('#submit').click(function(event) {
      event.preventDefault();

      if (!$('#status').val()) {
          $('#errors').html('');
          $("<p>Please select a status</p>").appendTo($('#errors'));
          $("#errors").show();
          $("#table_div").hide();
          return;
      } else {
          $("#errors").hide();
      }

      $("#warning").show();
      //get the data for the table
      $.getJSON("/all_issues/status/" + $("#status").val(), function(data) {
          table = $('#search_table').dataTable( {
              destroy: true,
              "data": data,
          });
          $('#table_div').show();
      });
      $("#warning").hide();
  });

Answer 1

移动$("#warning").hide()在你的里面 $.getJSON()回调。

$.getJSON() 是一个 AJAX 调用，所以回调是异步执行的。在您当前的设置中，您隐藏了 <div id="warning">在你显示它之后，当你想在你的 JSON 加载后隐藏它时。