Animasyon yüklendikten sonra bir Jquery düğmesinin metnini değiştiremezsiniz

Question

ajax isteğinde (.button('loading')) düğmemde bir yükleme animasyonu kullanıyorum. İstek tamamlandığında, .button('reset')'u ararım.

Sıfırlamadan sonra düğmenin metnini değiştirmek istiyorum (.html('hello')), ancak ilk duruma geri döner. Hata ayıklanırsam, yeni değere dönüştüğünü görebilir ve sonra hemen geri dönebilir.

$("#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>

Düzenleme; Bu pasajı örnektir, gerçek sıfırlama Bu benim kodda nasıl bir Ajax başarı çağrısı

içinde: Bu sorunu çözerseniz ben senin açıklamaya göre, anlaşılan kadarıyla

<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

, bkz a jsfiddle example

Eğer

$('.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) 
})