AJAX呼び出し後のDOMオブジェクトへのアクセス？

Question

私は現在のページにいくつかのHTMLを追加する典型的なAJAX呼び出しを持っています。私は典型的なjQueryセレクタを使って新しく挿入されたHTMLにアクセスしたいと思っています。

ここ

$.ajax({ 
    url: url, 
    success: function(data) { 
     $('body').append(data); 
    } 
}); 

$('#new_div').show(); 

#new_div ...私が行うことができるようにようをいただきたいものだが、私が取得したデータからいくつかのHTML要素になります。必ずしも新しい要素（clickなど）にイベントを添付する必要はありません。したがって、​​または.on()のようなものを使用すると、私の知る限りはここでは機能しません。

$.ajax()という変数を呼び出してみましたが、var new_div = $.ajax(...)という名前のコールはどこにも届きませんでした。あなたがコールバックからあなたのコードを分離する場合

$.ajax({ 
    url: url, 
    success: function(data) { 
     $('body').append(data).find('#new_div').show(); 
    } 
}); 

Answer 1

すぐ後に（あるいは前）新しいコンテンツを操作したい場合

functionWithALotOfStuffToDo = function(data){ 
    // do stuff here 
} 

$.ajax({ 
    url: url, 
    success: functionWithALotOfStuffToDo 
}); 

Answer 2

：方法について

Answer 3

それを挿入しますDOMに渡すと、AJAXの成功のコールバックにも入れることができます：

$.ajax({ 
    url: url, 
    success: function(data) { 
     $('body').append(data); 
     $('#new_div').show(); 
    } 
}); 

返されるデータを想定し

$(document).on('click', '#new_div', function(){ 
    alert("This function is bound to all #new_div's click events, even if they are added to the DOM via ajax later!") 
}); 

Answer 4

<div id='new_div' />のようなものが、その後

ような何かをしようとしている：あなたは、AJAXを経由してページに追加されるコンテンツへのハンドラをバインドしたい場合は、手、jQueryのは、このようにすることを行います

var newDiv = null; 

$.ajax({ 
    url: url, 
    success: function(data) { 
     newDiv = $(data).appendTo($('body')); 
    } 
}); 

これにより、<div />がページの本文に追加され、変数newDivにjQuery要素が割り当てられ、後で再びアクセスできます。

successが返される前にnewDivにアクセスすると、以前に割り当てられていた場合はnullまたは前の値になります。

Answer 5

は実際に物事のこの種は、以下の方法によって解決することができます。 （私はそれが他の人に似ている知っているが、より明確に少し）

$.ajax({ 
    url: url, 
    success: function(data) { 
     $('body').append(data); 
     afterHtmlAppendCallback(); 
    } 
}); 
function afterHtmlAppendCallback() 
{ 
    $('#new_div').show(); 
} 

Answer 6

が、私はそれは、AJAX非同期あなたが言及して問題を起こすことだと思います。

jQuery ajax funciton APIによると、 非同期HTTP（Ajax）リクエストを実行します。

あなたが要求

後のAjax右からのデータにアクセスする場合は、AJAXにあなたのコードを配置する必要があります。成功関数のよう：

$.ajax({ 
    url: url, 
    success: function(data) { 
     $('body').append(data); 
     $('#new_div').show(); 
    } 
}); 

または$（ '＃のnew_div'）セレクタが