jQuery find() funktioniert nur einmal am AJAX-Ergebnis?

Question

alles, was ich neu bei jQuery bin und ich habe ein kleines Problem mit der Manipulation von AJAX-Ergebnissen mit jQuery-Methoden.

Ich verwende ein AJAX get und führen Sie die find Methode auf den resultierenden Ausgang. Aber das scheint nur einmal zu funktionieren. Nachfolgende Versuche mit demselben Selektor im Argument find() funktionieren nicht. Verschiedene Selektoren funktionieren, aber nur einmal.

Es scheint etwas zu passieren, wenn das AJAX-Ergebnis durchlaufen wird.

AJAX-Aufruf ...

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

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

Suche Element ...

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

Dies funktioniert, aber wenn ich showContent(".teaser") wieder versuchen, nicht, weil es scheint nicht, etwas zu finden und so wird #content mit nichts überschrieben.

einen Blick auf meine Website nehmen ... wird

http://www.shadowshapes.com/dev

Answer 1

@redsquare, Vielen Dank! Das hat mich auf den richtigen Weg gebracht.

Für die Uneingeweihten wirkt append() wie ein 'Verschieben' statt einer 'Kopie' in einem einzelnen Selektorkontext. Anscheinend ist es ein häufiger Fehler unter Neulingen. Und es ist nicht sehr dokumentiert? Ich fühle mich jetzt nicht so schlecht! :)

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

Also brauchte ich clone() zusätzlich zu append() in diesem Fall zu verwenden.

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

Großartig! Problem gelöst!

Answer 2

Von einem schnellen ersten Blick Ich denke, Sie closure Ausgaben sind mit ...

Die $response Variable wird nicht im Bereich der Closure für die Event-Handler erfasst (z. B. auf Ihrem Klick -> Ausblenden -> ShowContent). Ich schätze, es wäre behoben, wenn Sie die $response Variable um, anstatt zu versuchen, es global zu verweisen. I.e. Ihr Beispiel nimmt, machen es so etwas wie dieses:

$.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')); 
    } 
... 

diese Weise werden Sie garantiert sind, dass $response immer da sein, wenn du gehst, es zu benutzen. Die andere Möglichkeit ist, $response tatsächlich global zu machen, indem Sie es außerhalb Ihrer $(document).ready deklarieren.

Answer 3

Danke, ich hatte eigentlich schon versucht, $response ohne Glück vorbei zu vertreiben. Ich habe es erneut versucht, und auch Ihren anderen Vorschlag, $response global zu machen. Kein Glück.

Die seltsame Sache ist, dass $response innerhalb loadContent() verfügbar ist. Es scheint nur, dass sobald der Selektor gefunden ist, kann nicht mehr "verwendet" werden? Zum Beispiel, wenn die Seite der folgenden Lasten passiert ...

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

Aber dann auf einem der Teaser Bilder klicken, wird ein Ereignis initiieren ...

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

die dann weg tritt ein Conditional innen So loadContent() ...

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

seit div.teaser bereits gefunden wurde, wenn die Seite geladen wird, wird #content nur geschrieben mit div.concept. Alle anderen Selektoren funktionieren auch, solange sie noch nicht verwendet wurden.

Answer 4

Sie verwenden den Inhalt von $ response und fügen einige von ihnen in andere Elemente ein. Das bedeutet, dass sie aus der Reaktion von $ in ihr neues Zuhause auswandern, weshalb der Selektor nur einmal funktioniert.

Schau es dir so an. Wenn Sie Ihre einzige und einzige $ 10 aus Ihrer Brieftasche nehmen und sie in meine Brieftasche legen, wird das nächste Mal, wenn Sie in Ihre Brieftasche schauen, es nicht da sein. Warum? Weil es in meinem ist.