jquery loader 没有出现第二次

Question

我正在调用加载器，直到响应来自服务器端。问题是在第一次运行上传文件后，当我第二次上传时，加载器没有出现。我是 jquery 的新手，请帮助我。这是一个代码片段

<form id="myForm" action="upload.php" method="post" enctype="multipart/form-data">
  <input id="doc" class="file" type="file" name="xls" data-min-file-count="1">
  <br>
  <button type="submit" class="btn btn-primary">Submit</button>
  <button type="reset" id="asd" class="btn btn-default">Reset</button>
</form>
<hr>

<div class="panel panel-default">
  <div class="panel-heading">The suggestions will appear Here</div>
  <div class="panel-body" id="output1">
    <img id="loader" src="30.gif" />
  </div>
</div>

<script>
  $("img#loader").hide();
  $("#doc").fileinput({
    'allowedFileExtensions': ['xls'],
  });

  $(document).ready(function() {

    $("#asd").click(function() {
      $("#output1").empty();
    });
    var options = {
      target: '#output1',
      beforeSubmit: function() {
        $("img#loader").show();
        alert("hinnh");
      },
      success: function() {
        $("img#loader").hide();
      }
    }

    $('#myForm').ajaxForm(options);
  });
</script>

Answer 1

你不应该清空 output1 div。只需更新 $("#asd").click - 使用以下代码运行。

$("#asd").click(function(){
    $("#output1").html('<img id="loader" src="30.gif" />');
     $("img#loader").hide();
  });

或

$(document).ready(function() {

$("#asd").click(function() {
  $("#output1").empty();
});
var options = {
  target: '#output1',
  beforeSubmit: function() {
    $("#output1").html('<img id="loader" src="30.gif" />');
    alert("hinnh");
  },
  success: function() {
    $("img#loader").hide();
  }
}

$('#myForm').ajaxForm(options);
});