Comment exécuter un javascript sur une sortie ajax ?

Question

J'utilise des onglets jquery-ui et ajax pour charger le contenu des onglets. Voici mon javascript :

 $(document).ready(function() {
     $("#tabs").tabs({ fx: { opacity: 'toggle' } });
     $('.hd_item').hover(function() {
     //Display the caption
         $(this).find('span.hd_caption').stop(false,true).fadeIn(600);
     },
     function() {
     //Hide the caption
         $(this).find('span.hd_caption').stop(false,true).fadeOut(400);
     });
 });

Lorsque l'utilisateur clique sur l'onglet, le fichier content.php est chargé par ajax. La sortie de l'ajax est :

 <li class="hd_item">
      <img title="Backyard Brawl" alt="Backyard Brawl" src="games/normal_icons/1844.png" id="hd_icon">
           <span class="hd_caption">
                <h1>Backyard Brawl</h1>
                <p id="hd_description">In this game you pick a player and beat each other up with ...</p>
                <p id="hd_stat">Added: <br>2009-12-14</p><a href="http://stackoverflow.com/dirtpilegames/index.php?ground=games&amp;action=play&amp;dig=backyard-brawl">PLAY</a>
           </span>
 </li>

Le problème que je rencontre est que le javascript ne fonctionne pas sur la sortie ajax. Comment faire pour qu'il fonctionne ?

Answer 1

Si je ne me trompe pas, c'est parce que vous liez l'événement de survol à des éléments qui n'existent pas encore (puisque l'appel AJAX prend un temps non nul pour s'exécuter). Vous pouvez essayer d'utiliser :

La fonction live() de jQuery

Au lieu d'utiliser la fonction .hover() pour créer votre lien.

Answer 2

Vous pouvez essayer de placer la fonction de survol dans votre fonction de réussite ajax.

Answer 3

C'est parce que les hd_items que vous ajoutez n'ont pas été trouvés lorsque la fonction ready() a été appelée et n'ont donc pas de fonctions d'événement de survol. Retirez cet extrait de la fonction ready() et appelez-le après avoir chargé la réponse ajax.

Answer 4

Lorsque vous demandez à jQuery, par exemple, de trouver tous les éléments de la classe .hd_item sur la page, vous ne lui demandez que les éléments du document actuel. Si vous ajoutez d'autres éléments au document, jQuery n'a aucune idée de réexécuter vos commandes passées. La solution est, bien sûr, de dire à jQuery de réexécuter ces commandes passées.

$(document).ready(function() {
     $("#tabs").tabs({ fx: { opacity: 'toggle' } });
     registerTabContent();
});

// This function mocks whatever loads your Ajax content
function loadSomeAjaxyStuff() {
    loadMyTab();
    // After we load the content, we rerun the code to pick up the new
    // (well, it gets the old ones as well) elements we've added.
    registerTabContent();
}

function registerTabContent() {
    $('.hd_item').hover(function() {
     //Display the caption
         $(this).find('span.hd_caption').stop(false,true).fadeIn(600);
     },
     function() {
     //Hide the caption
         $(this).find('span.hd_caption').stop(false,true).fadeOut(400);
     });
}