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

Question

Mon problème est un peu complexe.

J'ai 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;

    });

});

D'accord, d'abord ce n'est pas moi qui l'ai codé, donc je ne comprends vraiment pas ce qu'il fait et j'ai aussi essayé de le changer mais je n'ai pas réussi. Le code sélectionnera un lien 'nav li' et affichera la page de manière AJAX, ce qui signifie sans la recharger. Il le fait correctement :) Maintenant, tout ce que je veux faire, c'est ajouter une boîte fantaisie 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 et la boîte de fantaisie fonctionne comme il se doit, ainsi que les liens de liaison li fonctionnent bien. Alors, où est le problème? lorsque je clique sur un lien 'nav li' et que le contenu est chargé, puis que je clique à nouveau sur le lien de base, (je reviens à la première page), la boîte de fantaisie ne fonctionne plus. Je sais que c'est très sensible, alors vous avez peut-être mal compris, alors laissez-moi l'expliquer autrement. J'ai à la fois le sélecteur du 'nav li' et le sélecteur du lien de la boîte de fantaisie, quelle est la meilleure méthode pour les faire fonctionner ensemble ??

Quelqu'un peut-il également m'expliquer le rôle du code.
Merci.

Answer 1

Ok ... Voici ce que fait le code:

    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 récupère le hash de la page actuelle, vérifiez que l'un des "nav li" links se termine par ce hachage (5 caractères attendus) et si c'est le cas, chargera l'élément #content de la page hash + "quot.html" dans le #content de la page en cours (je suppose que c'est un div).

Imaginez que vous chargiez l'URL & http: //.../page1.html#page2 ". Page1 sera chargé, puis #content de page2.html sera chargé par un appel ajax dans #content 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;

    });

Ceci ajoutera le comportement suivant à "nav li". Liens: lorsque vous cliquez dessus, affichez un " message de chargement " et chargez le contenu de la page cible dans l'élément #content de la page en cours.

Je ne sais pas du tout pourquoi ce script, bien qu’il soit horrible, ferait en sorte que votre boîte fantaisie ne soit pas visible. Mon hypothèse est que le & nav; nav li " les liens chargeront le contenu avec un appel ajax et cela n'affectera pas votre fancybox, qui est déjà chargée, mais lorsque vous cliquez sur le lien d'accueil, la page est complètement rechargée et le code de la fancybox n'est pas exécuté, pour une raison. Vous pouvez vérifier cela en ajoutant une alerte simple:

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

Si la page complète est rechargée lorsque vous cliquez sur le lien d'accueil et que cette alerte ne s'affiche pas, vous avez trouvé la cause de votre problème.