Question

如何在点击按钮后多次出现加载图像？我设法让加载图像出现一次，但再次点击按钮后，图像不会出现。以下是我的代码，

的jQuery

$(document).ready(function(){   
  $("input:submit").on('click', function(e) {
    e.preventDefault();
    var isclicked = false;

    if (!isclicked) {
      $(".fa-spin").show();
      setClicked();
    }

    // set data and values here
    $.ajax({
      url: "insert-slip.php",
      type: "POST",
      data: fd,
      processData: false,  
      contentType: false  
    }).done(function(data){
      $('#result_insert').html(data);
      $(".fa-spin").hide();
    });

    function setClicked(){
       isclicked = true;
    }

    });
});

HTML

<div id="result_insert">
  <div class="fa fa-spinner fa-spin"></div>
</div>

解决方案

以下是我的问题的答案。

$(document).ready(function(){   
  $("input:submit").on('click', function(e) {
    e.preventDefault();
    $("#result_insert").empty();
    $(".fa-spin").show();

    // set data and values here
    $.ajax({
      url: "insert-slip.php",
      type: "POST",
      data: fd,
      processData: false,  
      contentType: false  
    }).done(function(data){
      $('#result_insert').html(data);
      $(".fa-spin").hide();
    });
  });
});

<div class="fa fa-spinner fa-spin"></div> 
<div id="result_insert"></div>

Answer 1

您通过使用从AJAX请求中返回的数据替换result_insert元素的内容来删除微调器：

$('#result_insert').html(data);

将微调器移到result_insert元素之外：

<div id="result_insert"></div>
<div class="fa fa-spinner fa-spin"></div>

Answer 2

在ajax函数中添加beforeSend添加微调器逻辑并done将图像更新为目标div

的js

$(document).ready(function(){   
  $("input:submit").on('click', function(e) {
    e.preventDefault();
    $.ajax({
      url: "insert-slip.php",
      type: "POST",
      data: fd,
      processData: false,  
      contentType: false,
    beforeSend: function() {
        $('#result_insert').html('<div class="fa fa-spinner fa-spin"></div>')
        }
    }).done(function(data){
      $('#result_insert').html(data);
    });
    });
});

HTML

<div id="result_insert"></div>

Answer 3

单击按钮后，您的代码会在成功调用ajax后替换result_insert内的内容，这会删除fa-spin div，这就是为什么在后续按钮点击时无法看到微调器的原因

<div id="container">
  <div class="fa fa-spinner fa-spin"></div>
  <div id="result_insert"></div>
</div>

这将为她做好准备。

单击后显示加载图像

3 个答案: