Доступ к объекту DOM после вызова AJAX?

Question

У меня типичный вызов AJAX, который добавляет некоторый HTML к текущей странице. Я хочу иметь доступ к недавно вставленному HTML с типичными селекторами jQuery.

Вот что я бы как, чтобы быть в состоянии сделать ...

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

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

#new_div бы некоторые HTML элемент из данных я извлеченного. Я не обязательно хочу присоединять события к новым элементам (например, click), поэтому использование чего-то вроде .load() или .on() здесь не работает (насколько я знаю).

Я попытался установить $.ajax() вызов переменной: var new_div = $.ajax(...), но это меня никуда не доставило.

Answer 1

как насчет:

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

Answer 2

Если вы хотите отделить код от обратного вызова:

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

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

Answer 3

Если вы хотите, чтобы управлять новым содержанием сразу после (или даже раньше), вставив его в DOM вы можете добавить это также в обратный вызов успеха AJAX:

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

С другой стороны руки, если вы хотите связать обработчик контент, который будет добавлен на страницу с помощью AJAX, JQuery делает это так:

$(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' /> затем попробовать что-то такое, как

var newDiv = null; 

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

Это добавит <div /> к телу вашей страницы и присвоит элементу jQuery значение переменной newDiv, которое затем будет доступно снова на более позднем этапе.

Однако, если вы получили доступ к newDiv до того, как был возвращен success, это будет null или предыдущее значение, если оно было назначено ранее.

Answer 5

На самом деле такого рода вещи могут быть решены следующим образом: (я знаю, что он похож на другие, но немного более ясно)

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

Answer 6

Я думаю, что это Аякса асинхронной вызвать проблему, которую вы упоминаете ,

В jQuery API ajax funciton говорит: Выполните асинхронный запрос HTTP (Ajax).

Если вы хотите получить доступ к данным из АЯКС справа после запроса

вы должны поставить вам код в Ajax.функция успеха, как:

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

Или включить параметр асинхронной в ложном

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

что будет убедиться, что $ («# new_div») селектор получает объект