Dostęp do obiektu DOM po wywołaniu AJAX?

Question

Mam typowe wywołanie AJAX, które dodaje trochę kodu HTML do bieżącej strony. Chcę mieć dostęp do nowo wstawionego HTML z typowymi selektorami jQuery.

Oto co ja jak aby móc zrobić ...

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

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

#new_div byłby jakiś element HTML z danymi ja odzyskać. Niekoniecznie chcę dołączać zdarzenia do nowych elementów (np. click), więc używanie czegoś takiego jak .load() lub .on() nie działa tutaj (o ile wiem).

Próbowałem ustawić wywołanie $.ajax() na zmienną: var new_div = $.ajax(...), ale to nigdzie mnie nie doprowadziło.

Answer 1

jak about:

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

Answer 2

Jeśli chcesz oddzielić kod z callback:

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

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

Answer 3

Jeśli chcesz manipulować nową zawartość natychmiast po (lub nawet wcześniej), wkładając go do DOM, możesz umieścić to również w odwołaniu do sukcesu AJAX:

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

Z drugiej strony strony, jeśli chcesz związać ładowarki do treści, która zostanie dodana do strony za pośrednictwem AJAX, jQuery robi tak:

$(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

Zakładając, że dane zwracane jest coś takiego jak <div id='new_div' /> następnie spróbować czegoś takiego jak

var newDiv = null; 

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

Spowoduje to dodanie <div /> do treści strony i przypisanie elementu jQuery do zmiennej newDiv, do której można później uzyskać dostęp na późniejszym etapie.

Jeśli jednak uzyskasz dostęp do newDiv przed zwróceniem success, będzie to null lub poprzednia wartość, jeśli została wcześniej przypisana.

Answer 5

Właściwie ten rodzaj rzeczy można rozwiązać następujący sposób: (wiem, że jest podobna do innych, ale trochę bardziej jasne)

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

Answer 6

myślę, że to ajax async przyczyną problemu można wymienić .

W języku jQuery API ajax funciton mówi: Wykonaj asynchroniczną prośbę HTTP (Ajax).

Jeśli chcesz uzyskać dostęp do danych z Ajax prawej życzenie

należy umieścić Ci kod w AJAX.Funkcja sukces jak:

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

Albo włączyć ustawienie transmisji asynchronicznej do fałszywego

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

który pozwoli upewnić się, że $ ('# new_div') selektor pobiera obiekt