Le rappel jQuery ne fonctionne pas pour la fonction de chargement, ne détecte pas les événements hover

Question

Utilisation de wordpress avec le thème atahualpa, et j'ai des hyperliens qui référencent un javascript simple, qui charge la sortie d'un fichier php dans un div. Cette partie fonctionne bien.

<a href="javascript:loadCategory(19,1);">a link</a> 

<script type="text/javascript"> 
jQuery("#categoryposts").load("http://www.mysite.com/myphp.php?cat="+catid+"&paged="+pagedid+"", "", 
     function(responseText, textStatus, XMLHttpRequest) { 
     if(textStatus == 'error') { 
      jQuery('#categoryposts').html('<p>There was an error making the AJAX request</p>'); 
     } 
     } 
); 
    } 
</script> 

Mais je veux avoir du plaisir avec les images (sliding boxgrid) qui sont chargés dans div « #categoryposts », mais c'est là que je frappe un mur. Mon php sort des divs avec les classes correctes mais je ne peux pas recevoir de réponse de jQuery du tout. Je suppose que c'est lié d'une certaine façon à la façon dont le DOM se charge mais je ne peux pas le comprendre. Par exemple, quand j'essaie d'ajouter les bonnes choses comme fonction de rappel, comme ci-dessous, je vois alert1, mais je ne reçois jamais alert2, et la fonction hover ne fonctionne pas.

  function loadCategory(catid,pagedid) { 

jQuery("#categoryposts").load("http://www.mysite.com/myphp.php?cat="+catid+"&paged="+pagedid+"", function() 
{ 
    alert('alert1'); 
    jQuery('.boxgrid.caption').hover(function(){ 
     alert('alert2'); 
     jQuery(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160}); 
     }, function(){ 
     jQuery(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160}); } 
)}, 
     function(responseText, textStatus, XMLHttpRequest) { 
     if(textStatus == 'error') { 
      jQuery('#categoryposts').html('<p>There was an error making the AJAX request</p>'); 
     } 
     } 
); 

} 

J'ai passé une journée entière à essayer de pirater à travers cela, essayer toutes sortes de choses, mais frapper un mur. En espérant qu'un gourou jQuery puisse donner un coup de main.

Edit: nettoyé formatage du code

Answer 1

Le rappel pour la charge() peut être exécuter après les données sont récupérées, mais avant qu'il ne soit ajouté au DOM. Après l'alerte ('alert1') essayez d'ajouter quelque chose comme ceci:

alert(jQuery('.boxgrid.caption').length); 

Cela devrait vous indiquer si cette collection existe à ce moment-là ou non.

Une autre possibilité serait d'utiliser la fonction "live()", au lieu de tenter d'ajouter ces gestionnaires d'événements dans le rappel.

Answer 2

Votre sélecteur est probablement incorrect. Avez-vous essayé quelque chose comme

alert ($ ('. Boxgrid.caption'). Longueur) pour voir si elle renvoie une valeur différente de zéro?

Answer 3

Avez-vous essayé de lier la fonction hover en utilisant la méthode 'live' de jQuery? Plutôt que de vol stationnaire contraignant au rappel de charge, vous pouvez lier séparément en utilisant quelque chose comme ceci:

$(".boxgrid.caption").live('hover', function(){ 
    //your hover function 
}); 

Cela permet une liaison dynamique, même lorsque les éléments sont chargés après le fait.