加载动画后无法更改Jquery按钮的文本

Question

我在ajax请求（.button('loading')）上的按钮上使用加载动画。当请求完成时，我打电话给.button('reset')。

我想在复位后更改按钮的文本（.html('hello')），但它会变回第一个状态。如果我调试，我可以看到它改变为新值，然后立即改回。

$("#myButtons .btn").click(function() { 
 
    $(this).button('loading').delay(1000).queue(function() { 
 
    $(this).button('reset'); 
 
    $(this).html('Hello'); 
 
    $(this).dequeue(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<div id="myButtons"> 
 
    <button type="button" class="btn btn-danger">Danger</button> 
 
</div>

编辑;这是一个片断例子，真正的复位是在阿贾克斯成功呼叫

这是它是如何在我的代码：

<button type="button" id="230" class="btn causes btn-danger" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i>">Non</button> 


$('.causes').click(function() { 
    $(this).button('loading'); 
    ChangeStatus(event.target.id) 

}); 

function ChangeStatus(id) { 
    var idCause = id; 
    var trouve = true; 
    var classe = "btn-success"; 
    var texte = "Oui"; 
    if ($("#" + idCause).hasClass("btn-success")) { 
     trouve = false; 
     classe = "btn-danger"; 
     texte = "Non"; 
    } 


    $.ajax({ 
     url: '/BREQ/Cause/ChangeCauseStatus', 
     data: { 'idCause': idCause, 'trouve': trouve }, 
     type: "post", 
     cache: false, 
     success: function (savingStatus) { 
      if (savingStatus == 1) { 

       $("#" + idCause).button('reset'); 
       $("#" + idCause).removeClass("btn-danger"); 
       $("#" + idCause).removeClass("btn-success"); 
       $("#" + idCause).addClass(classe); 
       $("#" + idCause).html(texte); 
      } else { 
       alert("Problème avec la sauvegarde"); 
      } 
     }, 
     error: function (xhr, ajaxOptions, thrownError) { 

     } 
    }); 
} 

Answer 1

从根据你的解释我的理解，看是否能解决您的问题 a jsfiddle example

您需要使用$（元素）的.text（）JQuery的财产

$('.resetButton').click(function(){ 
var butn = $(this); 
butn.text('loading'); 

    // lets assume your ajax request will take 2 seconds to resolve 
    myVar = setTimeout(function(){ 
    butn.text('Reset'); // after you get the response change the button text back to "Reset" 
    }, 2000) 
})