Ajaxリクエストが完了した際に呼び出されるハンドラを登録します。これはAjaxEventです。

.ajaxComplete( handler(event, XMLHttpRequest, ajaxOptions) )

戻り値:jQuery

Ajaxリクエストが完了する度に、jQueryはajaxCompleteイベントをトリガします。 .ajaxComplete()メソッドによって登録されたハンドラが、この際に実行されます。

このメソッドの処理を観察するには、基本的なAjax loadリクエストを設定します。

<div class="trigger">トリガ</div>
<div class="result"></div>
<div class="log"></div>

documentに対して、イベントハンドラを登録します。

$(document).ajaxComplete(function() {
  $( ".log" ).text( "ajaxCompeteがトリガされました。" );
});

そして、任意のjQueryメソッドからAjaxリクエストを行います。 ユーザーがtrigeerクラスの要素をクリックし、Ajaxリクエストが完了すると、ログメッセージが表示されます。

$( ".trigger" ).click(function() {
  $( ".result" ).load( "ajax/test.html" );
});

注: .ajaxComplete()は、jQueryオブジェクトのインスタンスのメソッドとして実装されているため、thisを使用して、 選択した要素をコールバック関数内で参照することが出来ます。 しかしjQuery1.8で、.ajaxComplete()メソッドはdocumentのみにしか使用できなくなりました。

全てのajaxCompleteハンドラは、どんなAjaxリクエストであろうと完了すれば実行されます。 もし、リクエストを識別する必要がある場合は、ハンドラに渡されるパラメータを参照します。 ajaxCompleteが実行される際に、eventオブジェクト、XMLHttpRequestオブジェクト、リクエストに使用された設定(settings)オブジェクトが渡されます。

例えば、特別なURLに対してのみコールバック関数内で処理を行いたい場合は、次のようにします。

$(document).ajaxComplete(function(event, xhr, settings) {
  if ( settings.url === "ajax/test.html" ) {
    $( ".log" ).text( "ajaxCompleteをトリガ。 結果は、" +
                     xhr.responseHTML );
  }
});

追記: もし、$.ajax()または、$.ajaxSetup()によってglobalオプションをfalseに指定されていれば、 .ajaxComplete()はトリガされません。

例:Ajaxのリクエストが完了した際に、メッセージを表示します。

$(document).ajaxComplete(function(event,request, settings) {
   $( "#msg" ).append( "<li>リクエスト完了</li>" );
 });

 Back to top