单击按钮后，在单击事件进行时在按钮上显示微调器图标

Question

我试图在提交加载时在按钮上显示微调器，我已经看到了几个实现并在我的应用程序中尝试过，但它不起作用。这是我试图描述的fiddle。我想提一件事，这个 HTML 在我的侧边栏上，并且是通过 ajax 调用上的 javascript 添加的

My JS

        (function () {
            $(document).on("click","#submitbutton", function (event) {
                $(this).addClass('active');
                var formdata = $("#filterdata").serializeArray();
                var url1 = "/SelectUnit";
                $.ajax({url: url1, data: formdata, type: 'GET', async:false .....}).done(function(){
    $(this).removeClass('active');

})
            });
            })();

   

 My CSS
    

.spinner {
          display: inline-block;
          opacity: 0;
          max-width: 0;
    
          -webkit-transition: opacity 0.25s, max-width 0.45s; 
          -moz-transition: opacity 0.25s, max-width 0.45s;
          -o-transition: opacity 0.25s, max-width 0.45s;
          transition: opacity 0.25s, max-width 0.45s; /* Duration fixed since we animate additional hidden width */
        }
    
        .has-spinner.active {
          cursor:progress;
        }
    
        .has-spinner.active .spinner {
          opacity: 1;
          max-width: 50px; /* More than it will ever come, notice that this affects on animation duration */
        }

My HTML
<div class="formbuttons">
            <button type="button" id="submitbutton" class="btn buttoncolor has-spinner">
                  <span class="spinner"><i class="icon-spin icon-refresh"></i></span>Select</button>
            <button type="button" class="btn buttoncolor" onclick="clearFilter();">Clear</button>
</div>

Answer 1

单击按钮后，您可以使用 jQuery 替换按钮。我在以前的项目中使用过这个：

jQuery(".submit-btn span").html('<i class="fa fa-refresh fa-lg fa-spin" style="color: #ffffff;"></i>');

这用旋转图标替换了实际的按钮文本...您可以在处理完成后将其更改回原始文本...

您还必须包括：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Answer 2

我在我的问题中发现了问题。其实我在做

async:false in my AJAX call. 

这就是为什么在调用之后执行 ajax 调用之前“添加类”的原因。

我从以下问题中发现了这一点。

jquery ajax beforesend

Answer 3

我在您的代码中进行了一些更改（更改了图标并编辑了 CSS）以便于测试：http://jsfiddle.net/q1d06npq/4/

在您的情况下，最好的选择是使用 $.ajax().always()，而不是 $.ajax().done()，即使 ajax 失败也会执行。

回调函数内部的代码$(this)不会指向按钮，解决你可以这样使用：var elem = $(event.currentTarget);

Answer 4

您可以使用以下代码实现此目的：

var $loading = $('.spinner').hide();
$(document)
  .ajaxStart(function () {
    $loading.show();
  })
  .ajaxStop(function () {
    $loading.hide();
  });

Answer 5

问题是您在 $.ajax 中的代码甚至执行之前删除了活动类。

有几种方法可以将 (this) 对象传递给您的 $.ajax 成功函数。这是一个。

(function () {
    $(document).on("click","#submitbutton", function (event) {
        $(this).addClass('active');
        var formdata = $("#filterdata").serializeArray();
        var url1 = "/SelectUnit";
        $.ajax({
            context: this,
            url: 'whatever.php'
        }).done(function(){
            $(this).removeClass('active');
        });

    });
})();