Php JQuery Ajax仅在第一次请求时加载微调器

我有以下JQuery：

    $(document).ready(function() {

        $(document).ajaxStart(function(){
            $("#spinner").css("display", "block");
        });
        $(document).ajaxComplete(function(){
            $("#spinner").css("display", "none");
        });

        $("#go").click(function() {
            $("#messager").html('<img src="spinner.gif" id="spinner">');
            $.post("send.php", {
                first:  first,
                second:  second
            }, function(result) {
                $("#messager").html(result);                
            });
        });

    });

如果用户第一次单击

#go

，则一切正常。首先显示微调器，然后显示“某物”

但是，如果用户第二次单击

#go

，则不会显示微调器

如果用户在不重新加载站点的情况下单击

#go

，我必须如何更改微调器每次显示的代码

$("#messager").html(result);

您正在用结果替换消息的全部内容。旋转者是送信者的孩子。因此，它不再存在

---

您正在用结果替换消息的全部内容。旋转者是送信者的孩子。因此，它不再存在。

您必须在调用ajax请求时启用spinner，并在收到响应后立即禁用它。 试试这个

---

调用ajax请求时必须启用spinner，并在收到响应后立即禁用它。 试试这个

---

您可以使用以下内容：

<div id="messager"></div>
<script>


$(function() {

$("#go").click(function(){
    hideSpinner();
    $.ajax({
       url : "send.php", 
       data: { first:  first,second:  second},
       beforeSend: function() {
           showSpinner();
       },
       success: function(result){
            $("#messager").html(result);             
       },
       error: function(err) {
           console.log(err);
           hideSpinner();
       }
    });
});

});

function hideSpinner() {
if($(document).find('#spinner').length > 0) {
    $(document).find('#spinner').remove();
}
}
function showSpinner() {
    $('#messager').append('<img src="spinner.gif" id="spinner">');
}

</script>

$（函数（）{
$（“#go”）。单击（函数（）{
hideSpinner（）；
$.ajax({
url:“send.php”，
数据：{first:first，second:second}，
beforeSend:function（）{
showSpinner（）；
},
成功：功能（结果）{
$（“#messager”）.html（结果）；
},
错误：函数（err）{
控制台日志（err）；
hideSpinner（）；
}
});
});
});
函数hideSpinner（）{
if（$（文档）.find（“#微调器”）.length>0）{
$（文档）。查找（“#微调器”）.remove（）；
}
}
函数showSpinner（）{
$（'#messager'）。附加（''）；
}

您可以使用以下内容：

<div id="messager"></div>
<script>


$(function() {

$("#go").click(function(){
    hideSpinner();
    $.ajax({
       url : "send.php", 
       data: { first:  first,second:  second},
       beforeSend: function() {
           showSpinner();
       },
       success: function(result){
            $("#messager").html(result);             
       },
       error: function(err) {
           console.log(err);
           hideSpinner();
       }
    });
});

});

function hideSpinner() {
if($(document).find('#spinner').length > 0) {
    $(document).find('#spinner').remove();
}
}
function showSpinner() {
    $('#messager').append('<img src="spinner.gif" id="spinner">');
}

</script>

$（函数（）{
$（“#go”）。单击（函数（）{
hideSpinner（）；
$.ajax({
url:“send.php”，
数据：{first:first，second:second}，
beforeSend:function（）{
showSpinner（）；
},
成功：功能（结果）{
$（“#messager”）.html（结果）；
},
错误：函数（err）{
控制台日志（err）；
hideSpinner（）；
}
});
});
});
函数hideSpinner（）{
if（$（文档）.find（“#微调器”）.length>0）{
$（文档）。查找（“#微调器”）.remove（）；
}
}
函数showSpinner（）{
$（'#messager'）。附加（''）；
}

ajaxStart和ajaxComplete已经在这样做了。这不是真正的问题，您可能希望使用

.always（）

而不是success回调，否则如果出现错误，您的微调器将“卡住”。@Taplar是的，您是对的，我对问题的理解不同。ajaxStart和ajaxComplete已经在这样做了。这不是真正的问题，您可能希望使用

.always（）

而不是success回调，否则如果出现错误，您的微调器将“卡住”。@Taplar是的，您是对的，我对问题的理解不同。我添加了$（“#messager”）.html（“”）；现在它像我想要的那样运行！我添加了$（“#messager”）.html（“”）；现在它像我想要的那样运行！

$(document).ready(function(){
    $("#go").click(function(){
        $("#spinner").css("display", "block");
        $.post("send.php", {
            first:  first,
            second:  second
        }, function(result) {
             $("#spinner").css("display", "none");
            $("#messager").html(result);                
        });
    });

<div id="messager"></div>
<script>


$(function() {

$("#go").click(function(){
    hideSpinner();
    $.ajax({
       url : "send.php", 
       data: { first:  first,second:  second},
       beforeSend: function() {
           showSpinner();
       },
       success: function(result){
            $("#messager").html(result);             
       },
       error: function(err) {
           console.log(err);
           hideSpinner();
       }
    });
});

});

function hideSpinner() {
if($(document).find('#spinner').length > 0) {
    $(document).find('#spinner').remove();
}
}
function showSpinner() {
    $('#messager').append('<img src="spinner.gif" id="spinner">');
}

</script>