在提交时加载时在按钮上显示微调器图标

Question

我试图在加载提交时在按钮上显示微调器，我已经看到了几个实现并在我的应用程序中尝试过，但它不起作用。这是我试图描述的小提琴。我想提到另一件事，这个 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

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

而不是$.ajax().done()在你的情况下，最好的选择是使用$.ajax().always()是即使阿贾克斯未能执行。

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