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>

编辑;这是一个片段示例，真正的重置是在Ajax成功调用中

这就是我的代码：

<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

你需要使用$（element）.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)
})

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

1 个答案: