jQuery find() работает только один раз на результат AJAX?

Question

все, что я новичок в jQuery, и у меня возникла проблема с обработкой результатов AJAX с помощью методов jQuery.

Я использую AJAX get и выполняю метод find на результирующем выходе. Но это, похоже, работает только один раз. Последующие попытки использования одного и того же селектора в аргументе find() не работают. Различные селекторы будут работать, но снова, только один раз.

Кажется, что-то происходит при пересечении результата AJAX?

AJAX вызов ...

$.get('sections.htm', {}, function(data) { 
     var $response = $('<div />').html(data); 
     showContent("teaser"); 

     function showContent(nav) { 
      loadContent(nav); 
      loadSlimboxHack(); 
      $('#content').fadeIn(400); 
     } 

Найти элемент ...

function loadContent(nav) { 
     if (nav == 'teaser') 
     { 
      $('#content').html($response.find('.teaser')); 
     } 

Это работает, но если я пытаюсь showContent(".teaser") снова, он терпит неудачу, потому что, кажется, не найти ничего и поэтому #content ничего не перезаписывается.

Посмотрите на моем сайте, чтобы увидеть ...

http://www.shadowshapes.com/dev

Answer 1

@redsquare, Большое спасибо! Это поставило меня на правильный путь.

Для непосвященных append() действует как «перемещение» вместо «копии» в контексте одного селектора. По-видимому, это распространенная ошибка среди новичков. И это не совсем документировано? Теперь я не чувствую себя так плохо! :)

http://www.nabble.com/Undocumented-move-copy-behavior-of-append%28%29-et-al.-ts21179461s27240.html#a24146606

Так мне нужно использовать clone() в дополнение к append() в этом случае.

$('#content').append($response.find('div.concept' + tag).clone()); 

Отлично! Задача решена!

Answer 2

С быстрым первым взглядом, Я думаю у вас возникли вопросы, closure ...

$response переменных не фиксируется в области закрытия для обработчиков событий (например, на вашем клике -> fadeout -> showContent). Я предполагаю, что это будет исправлено, если вы передадите переменную $response, вместо того, чтобы пытаться ссылаться на нее по всему миру. То есть принимая ваш пример, сделать что-то вроде этого:

$.get('sections.htm', {}, function(data) { 
    var $response = $('<div />').html(data); 
    showContent("teaser", $response); 

    function showContent(nav, $response) { 
     loadContent(nav, $response); 
     loadSlimboxHack(); 
     $('#content').fadeIn(400); 
    } 
... 
    function loadContent(nav, $response) { 
    if (nav == 'teaser') 
    { 
     $('#content').html($response.find('.teaser')); 
    } 
... 

Таким образом, вы гарантировано, что $response всегда будет там, когда вы идете, чтобы использовать его. Другой вариант - сделать $response фактически глобальным, объявив его за пределами вашего $(document).ready.

Answer 3

Спасибо, я уже пробовал проехать около $response без везения. Я попробовал еще раз, а также попробовал другое предложение сделать $response глобальным. Не повезло.

Странная вещь в том, что $response доступен в пределах loadContent(). Просто кажется, что после того, как селектор найден, его больше нельзя «использовать»? Например, когда страница загружается происходит следующее ...

 if (nav == 'teaser') 
     { 
      $('#content').html($response.find('.teaser')); 
     } 

Но затем нажав на одну из пробников изображений будет инициировать событие ...

$('div.teaser_img').live("click", function() { 
     var nav = $(this).attr("id"); 
     $('#content').fadeOut(400, function() { 
      showContent(nav, $response); 
     }); 

Который затем пинает conditonal внутри loadContent() ...

   if (nav == projects[i]) 
       { 
        var tag = '#' + nav; 
        $('#content').html($response.find('div.teaser' + tag)); 
        $('#content').append($response.find('div.concept' + tag)); 
        break; 
       } 

Так с div.teaser уже найден при загрузке страницы, #content только будет написана с div.concept. Любой из других селекторов также будет работать до тех пор, пока они еще не были использованы.

Answer 4

Вы используете содержимое $ response и добавляете некоторые из них в другие элементы. Это означает, что они переходят из $ ответа и в новый дом, поэтому селектор будет работать только один раз.

Посмотрите на это так. Если вы возьмете один и только 10 долларов из своего кошелька и поместите его в мой, то в следующий раз, когда вы посмотрите в свой кошелек, его там не будет. Зачем? Потому что это у меня.