jQuery find() ne fonctionnant qu'une seule fois sur le résultat AJAX?

Question

tout je suis nouveau à jQuery et j'ai un peu de mal à manipuler les résultats AJAX avec les méthodes jQuery.

J'utilise un AJAX get et exécute la méthode find sur la sortie résultante. Mais cela ne semble fonctionner qu'une seule fois. Les tentatives suivantes utilisant le même sélecteur dans l'argument find() ne fonctionnent pas. Différents sélecteurs fonctionneront, mais encore une fois, une seule fois.

Il semble que quelque chose se passe lors de la traversée du résultat AJAX?

appel AJAX ...

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

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

élément Recherche ...

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

Cela fonctionne, mais si je tente showContent(".teaser") à nouveau, il échoue parce qu'il ne semble pas trouver quoi que ce soit et donc #content est écrasé avec rien.

Jetez un oeil à mon site pour voir ...

http://www.shadowshapes.com/dev

Answer 1

@redsquare, Merci beaucoup! Cela m'a mis sur le bon chemin. Pour les non initiés, append() agit comme un 'déplacement' au lieu d'une 'copie' dans un contexte de sélecteur unique. Apparemment, c'est une erreur commune chez les débutants. Et ce n'est pas tout à fait documenté? Je ne me sens pas si mal maintenant! :) Je besoin

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

utiliser clone() en plus append() dans ce cas.

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

Très bien! Problème résolu!

Answer 2

D'un premier coup d'œil, je pense que vous rencontrez des problèmes closure ...

La variable $response n'est pas capturé dans la portée de la fermeture pour les gestionnaires d'événements (comme sur votre clic -> fadeout -> showContent). Je suppose qu'il serait corrigé si vous passiez la variable $response au lieu d'essayer de le référencer globalement. C'est à dire. en prenant votre exemple, faire quelque chose comme ceci:

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

De cette façon, vous êtes assuré que $response sera toujours là quand vous allez l'utiliser. L'autre option consiste à rendre globalement $response en le déclarant en dehors de votre $(document).ready.

Answer 3

Merci, j'avais déjà essayé de passer le $response sans aucune chance. Je l'ai essayé à nouveau, et j'ai aussi essayé votre autre suggestion de faire $response global. Pas de chance.

La chose étrange est que $response est disponible dans loadContent(). Il semble juste qu'une fois le sélecteur trouvé, il ne peut plus être "utilisé"? Par exemple, une fois que la page charge les événements suivants se ...

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

Mais puis en cliquant sur l'une des images teaser lancera un événement ...

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

qui démarre alors un large intérieur conditionnelle à des loadContent() ...

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

Ainsi depuis div.teaser a déjà été trouvé lors du chargement de la page, #content ne sera écrite avec div.concept. Tous les autres sélecteurs fonctionneront aussi longtemps qu'ils n'ont pas déjà été utilisés.

Answer 4

Vous utilisez le contenu de la réponse $ et en ajoutant certains d'entre eux dans d'autres éléments. Cela signifie qu'ils déménagent hors de la maison et donc dans leur nouvelle maison, donc pourquoi le sélecteur ne travaillera qu'une seule fois.

Regardez comme ça. Si vous prenez votre et seulement 10 $ de votre portefeuille et le mettre dans le mien, la prochaine fois que vous regardez dans votre portefeuille, il ne sera pas là. Pourquoi? Parce que c'est dans le mien.