jqueryの表示・ローダは、私は2つのフィールドを持っている

Question

を呼び出しますアヤックスコール は、ユーザー名または電子メールが既に存在するかどうかを確認しています（フォーカスされたフィールドに依存します）

予想通り:)

最初のフォーカスアウトが正常に動作し、それが働いていない、

$().ready(function() { 
    $("#Username, #Email").bind('focusout', processCheck); 
}); 

function processCheck() { 
    if ($(this).val() == '') 
     return; 
    $(this).next().find('img').bind('ajaxStart', loading); 
    $.ajax({ 
     type: "POST", 
     url: 'Is' + $(this).attr("id") + 'Exists', 
     data: "{'" + $(this).attr("id") + "':'" + $(this).val() + "'}", 
     contentType: "application/json; charset=utf-8", 
     async: true, 
     dataType: "json", 
     success: function (msg) { 

     } 
    }); 
} 

function loading() { 
    $(this).show().unbind('ajaxStart').bind('ajaxStop', loadingStop); 
} 

function loadingStop() { 
    $(this).hide().unbind('ajaxStop'); 
} 

まあ：

これは私が書いたjqueryのコードです。その後、最初のものが完了するまで、2番目のものは起動しません。

両方のフィールドで非同期で作業する必要があります。

どのようにすればいいのでしょうか？

ありがとうございました！

Answer 1

私は特定のjqueryのはないよajaxStartとajaxStopカスタムにDOM内 イベントを登録し、とにかく、$ .ajaxStart（）と$ .ajaxStopは（） 本当にそのように動作しません。イベントコードの "ラッパー"に似ています。私は という2つの機能を備えたソリューションを提案できますが、 は必要ありません。

明らかDIV要素（または任意の他の要素）にajaxStartとajaxStopを取り付ける

function processCheck() { 
    var $this = $(this); 
    if ($this.val() == '') return; 
    $img = $this.next().find('img'); 
    $img.show(); 
    $.ajax({ 
     type: "POST", 
     url: 'Is' + $this.attr("id") + 'Exists', 
     data: "{'" + $this.attr("id") + "':'" + $this.val() + "'}", 
     contentType: "application/json; charset=utf-8", 
     async: true, 
     dataType: "json", 
     success: function (msg) { 
      // stuff 
      $img.hide(); 
     } 
    }).always(function() { 
     $img.hide(); 
    }); 
} 

Answer 2

$('#loadingDiv').hide() // hide it initially 
     .ajaxStart(function() { 
     //alert('started'); 

     $('#loadingDiv').show(); 
     }) 
     .ajaxStop(function() { 
     //alert('stoped'); 

     $('#loadingDiv').hide(); 
    }); 

<span id="loadingDiv"><img src="images/ajax-loader.gif" alt="Loading..."></span>