Problème de sélecteur d'élément jQuery

Question

Mon problème est un peu complexe.

Je le code suivant:

$(document).ready(function() { 

    var hash = window.location.hash.substr(1); 
    var href = $('#nav li a').each(function(){ 
     var href = $(this).attr('href'); 
     if(hash==href.substr(0,href.length-5)){ 
      var toLoad = hash+'.html #content'; 
      $('#content').load(toLoad) 
     }           
    }); 

    $('#nav li a').click(function(){ 

     var toLoad = $(this).attr('href')+' #content'; 
     $('#content').hide('fast',loadContent); 
     $('#load').remove(); 
     $('#wrapper').append('<span id="load">LOADING...</span>'); 
     $('#load').fadeIn('normal'); 
     window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5); 
     function loadContent() { 
      $('#content').load(toLoad,'',showNewContent()) 
     } 
     function showNewContent() { 
      $('#content').show('normal',hideLoader()); 
     } 
     function hideLoader() { 
      $('#load').fadeOut('normal'); 
     } 
     return false; 

    }); 

}); 

Bon, tout d'abord ce n'est pas moi qui a codé, donc je ne comprends vraiment pas ce qu'il fait et aussi j'ai essayé de le changer, mais je ne parvenais pas . Le code sélectionnera un lien 'nav li' et affichera la page de manière AJAX, cela signifie sans le recharger. Il le fait correctement :) Maintenant, tout ce que je veux faire pour ajouter une fancybox pour enregistrer les utilisateurs. Pour ce faire, je devrais ajouter le code suivant.

$("a#reg").fancybox({ 
    'hideOnContentClick': false 
}); 

maintenant je viens de mettre le code dans document.readyfunction de $ et la boîte de fantaisie fonctionne comme il se doit, aussi des liens nav li fonctionne bien. Alors, où est le problème? quand je clique sur un lien 'nav li' et qu'il charge le contenu puis clique de nouveau sur le lien home, (je reviens à la première page), la boîte de fantaisie ne fonctionne plus. Je sais que c'est très sensible, peut-être que vous l'avez mal compris, alors laissez-moi vous expliquer d'une autre façon. J'ai à la fois le sélecteur du 'nav li' et le sélecteur du lien de boîte de fantaisie, quelle est la meilleure méthode pour les faire fonctionner ensemble?

Aussi quelqu'un peut-il m'expliquer ce que le code fait aussi bien.
Merci.

Answer 1

Ok ... Voici ce que le code fait:

var hash = window.location.hash.substr(1); 
    var href = $('#nav li a').each(function(){ 
     var href = $(this).attr('href'); 
     if(hash==href.substr(0,href.length-5)){ 
       var toLoad = hash+'.html #content'; 
       $('#content').load(toLoad) 
     }                      
    }); 

Cette première partie obtiendra le hash de la page en cours, vérifiez que l'un des liens « nav li » se termine par ce hachage (5 caractères attendu) et si c'est le cas, va charger l'élément #content de la page hash + ".html" dans l'élément #content de la page en cours (je suppose que c'est un div). Imaginez que vous chargiez l'adresse URL "http://.../page1.html#page2". Page1 sera chargé, puis #content de page2.html sera chargé par un appel ajax dans # contenu de page1.

$('#nav li a').click(function(){ 

     var toLoad = $(this).attr('href')+' #content'; 
     $('#content').hide('fast',loadContent); 
     $('#load').remove(); 
     $('#wrapper').append('<span id="load">LOADING...</span>'); 
     $('#load').fadeIn('normal'); 
     window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5); 
     function loadContent() { 
       $('#content').load(toLoad,'',showNewContent()) 
     } 
     function showNewContent() { 
       $('#content').show('normal',hideLoader()); 
     } 
     function hideLoader() { 
       $('#load').fadeOut('normal'); 
     } 
     return false; 

    }); 

Cela va ajouter le comportement suivant aux liens « nav li »: lorsque vous cliquez dessus, montrent un « message de chargement » et charger le #content de la page cible dans l'élément #content de la page en cours.

Je ne sais pas pourquoi ce script, bien qu'étant horrible, ferait que votre fancybox ne soit pas visible. Je suppose que les liens "nav li" vont charger le contenu avec un appel ajax et cela n'affectera pas votre fancybox, qui est déjà chargé, mais lorsque vous cliquez sur le lien d'accueil, la page est complètement rechargée et le code fancybox n'est pas exécuté, pour une raison. Vous pouvez vérifier cela en ajoutant simple alerte:

alert("initializing fancybox"); 
$("a#reg").fancybox({ 
    'hideOnContentClick': false 
}); 

Si la page complète est rechargée lorsque vous cliquez sur le lien à domicile, et cette alerte ne popup de pas, vous avez trouvé la cause de votre problème.