JQueryスピナーの問題

Question

このコードが存在する私のフォームでは、optionForm divをクリックするたびにスピナー関数が起動します。最初のクリックが正常に機能し、アラートが1回発生します。再度クリックすると、2回発射されます。 3回目のクリックで3回火災などどこに問題がありますか？

<script type="text/javascript"> 

$("#optionForm").click(function() { 

    $("#process").hide().ajaxStart(function() { 
     alert("show") 
     $("#process").fadeIn('100');  
    }) 
    .ajaxStop(function() { 
     alert("hide") 
     $("#process").hide(); 
    }); 

    $.post('post_requests.php', { 

     scenario: ($('#scenario:checked').length ? 1 : 0), 
     toolkit: ($('#toolkit:checked').length ? 1 : 0), 
     newsletter: ($('#newsletter:checked').length ? 1 : 0), 
     scenarios: $('#scenarios').val(), 
     tools: $('#tools').val(), 
     news: $('#news').val(), 
     submit: 'yes'}, function(data) { 

      $("#optionResponse").html(data).fadeIn('100'); 

      FadeMsg(); 

     }, 'text'); 

    function FadeMsg() { 

     waiting = setInterval(function() { 
      $('#optionResponse').fadeOut(500); 
      },3000);  
    }; 

    clearInterval(waiting); 
    return false; 

});   
</script> 

Answer 1

あなたはクリックハンドラーの外ajaxStartとajaxStop電話をかける必要があります。

クリックハンドラにそれらを保持すると、新しいajaxリクエストが開始または停止するたびに新しいコールバックが追加されて実行されます。言う

ドキュメントもあなたがやろうとしているものと同様の例があります：Ajaxリクエストを開始する（と何が既にアクティブ ではありません）たび

はロードメッセージを表示します。

Answer 2

オプションフォームをクリックするたびに関数を購読している可能性があります。

代わりにこれを試してください。

$("#process").hide().ajaxStart(function() { 
     alert("show") 
     $("#process").fadeIn('100');  
    }) 
    .ajaxStop(function() { 
     alert("hide") 
     $("#process").hide(); 
    }); 
$("#optionForm").click(function() { 
    // etc... 
}); 

Answer 3

たびuが発射されたクリックイベントをDIV optionFormをクリックして、それが$("#process")に新しいajaxStartイベントをアタッチします。
初めてイベントをクリックすると、1つのイベントが接続されます。
とうまく動作します。
次回はそれをもう一度クリックするともう1つのイベントが接続され、2回発生します。
。代わりにとを添付してください。 ajaxStop()イベントはアドバイスで呼び出され、クリック機能が呼び出されないとき