Kann den Text einer Jquery-Schaltfläche nach dem Laden der Animation nicht ändern

Question

Ich verwende eine Lade-Animation auf meiner Schaltfläche auf einer Ajax-Anfrage (.button('loading')). Wenn die Anfrage abgeschlossen ist, rufe ich .button('reset') an.

Ich möchte den Text der Schaltfläche nach dem Zurücksetzen ändern (.html('hello')), aber es wechselt zurück in den ersten Zustand. Wenn ich debugge, kann ich sehen, wie es sich auf den neuen Wert ändert und dann sofort zurückwechselt.

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

bearbeiten; Dies ist ein Snippet Beispiel das eigentliche Reset in einem Erfolg Ruf Ajax ist

Dies ist, wie es in meinem Code ist:

<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

Von dem, was ich verstand nach Ihrer Erklärung, ob das Ihr Problem beheben a jsfiddle example

müssen Sie die $ verwenden (Element) .text() JQuery Eigenschaft

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