Problema con il selettore di elementi jQuery

Question

Il mio problema è un po 'complesso.

Ho il seguente codice:

$(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;

    });

});

Ok, prima non sono io che l'ho codificato, quindi non capisco davvero cosa fa e ho anche provato a cambiarlo ma non ci sono riuscito. Il codice selezionerà un link 'nav li' e visualizzerà la pagina in modo AJAX, questo significa senza ricaricarlo. Lo fa correttamente :) Ora, tutto quello che voglio fare è aggiungere un fancybox per registrare gli utenti. Per fare ciò dovrei aggiungere il seguente codice.

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

ora ho appena messo il codice in $ document.readyfunction e la scatola fantasia funziona come dovrebbe, anche i collegamenti nav li funzionano bene. Allora dov'è il problema? quando faccio clic su un collegamento "nav li" e questo carica il contenuto, quindi faccio di nuovo clic sul collegamento home (ritorno alla prima pagina), la casella di fantasia non funziona più. So che è molto sensibile, quindi potresti averlo capito male, quindi lasciami spiegare in un altro modo. Ho sia il selettore di 'nav li' che il selettore del collegamento a scatola fantasia, qual è il metodo migliore per farli lavorare insieme ??

Qualcuno può anche spiegarmi cosa fa anche il codice.
Grazie.

Answer 1

Ok ... Ecco cosa fa il codice:

    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)
        }                                                                                       
    });

Questa prima parte otterrà il hash della pagina corrente, controlla che uno dei "nav li" link termina con questo hash (5 caratteri previsti) e, in tal caso, caricherà l'elemento #content della pagina hash + " .html " in #content della pagina corrente (suppongo sia un div).

Immagina di caricare l'URL " http: //.../page1.html#page2 " ;. Pagina1 verrà caricata e quindi, #content di page2.html verrà caricata da una chiamata ajax in #content di 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;

    });

Questo aggiungerà il seguente comportamento a " nav li " link: quando si fa clic, mostra un messaggio di "caricamento" " e carica il #content della pagina di destinazione nell'elemento #content della pagina corrente.

Non ho idea del perché questa sceneggiatura, nonostante sia terribile, farebbe in modo che il tuo fancybox non venga mostrato. La mia ipotesi è che il "nav li" i collegamenti caricheranno il contenuto con una chiamata Ajax e questo non influirà sul tuo fancybox, che è già caricato, ma quando fai clic sul link principale, la pagina viene ricaricata completamente e il codice fancybox non viene eseguito, per un motivo. Puoi verificarlo aggiungendo un semplice avviso:

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

Se la pagina intera viene ricaricata quando si fa clic sul collegamento principale e questo avviso non viene visualizzato, è stata rilevata la causa del problema.