JQuery Fancybox ne fonctionne pas après le rechargement de DIV

J’utilise Fancybox sur mon site pour ouvrir des liens vers d’autres pages (pages externes).

Fondamentalement, l’utilisateur clique sur une image et cela ouvre une boîte fantaisie contenant la page externe. Les liens d’image sont contenus dans une page (l’enfant) qui est affichée dans une DIV sur une autre page (le parent). Le parent a la possibilité de recharger les données dans la DIV en rechargeant la page enfant avec différents parameters qui entraîneront la modification de l’image et des liens.

Tout cela fonctionne parfaitement avec le premier chargement. Mais après cela, lorsque la DIV est rechargée avec la page enfant contenant des données différentes, le popup fancybox ne fonctionne plus. Si je fais ensuite une actualisation F5 sur la page, cela fonctionne à nouveau. Mais seulement lors du premier chargement.

Le code sur la page enfant pour configurer fancybox pour les liens d’image:

$.noConflict(); $(document).ready(function() { $(".userdetailslink").fancybox({ 'width' : '80%', 'height' : '80%', 'autoScale' : false, 'transitionIn' : 'elastic', 'transitionOut' : 'elastic', 'type' : 'iframe' }); }); 

J’ai aussi essayé ce qui suit avec les mêmes résultats:

 $.noConflict(); $(".userdetailslink").ready(function() { $(".userdetailslink").fancybox({ 'width' : '80%', 'height' : '80%', 'autoScale' : false, 'transitionIn' : 'elastic', 'transitionOut' : 'elastic', 'type' : 'iframe' }); }); 

Toute aide serait appréciée.

Utilisez-vous les méthodes AJAX pour charger la div? Vous pouvez utiliser la fonction de rappel pour appliquer la gestion des événements au contenu chargé.

  $("div").load("url", function(){ $(".userdetailslink").fancybox({ 'width' : '80%', 'height' : '80%', 'autoScale' : false, 'transitionIn' : 'elastic', 'transitionOut' : 'elastic', 'type' : 'iframe' }); }); 

De cette façon, il fonctionne également après la charge. Bien sûr, vous faites la charge initiale telle que vous êtes.