Problema con el selector de elementos jQuery

Question

Mi problema es un poco complejo.

Tengo el siguiente código:

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

    });

});

Bien, primero no fui yo quien lo codificó, así que realmente no entiendo lo que hace y también traté de cambiarlo, pero no tuve éxito. El código seleccionará un enlace 'nav li' y mostrará la página de forma AJAX, esto significa sin volver a cargarlo. Hace esto correctamente :) Ahora, todo lo que quiero hacer es agregar un fancybox para registrar usuarios. Para hacerlo, debo agregar el siguiente código.

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

ahora acabo de poner el código en $ document.readyfunction y la caja elegante funciona como debería, también los enlaces de navegación funcionan bien. Entonces, ¿dónde está el problema? cuando hago clic en el enlace 'nav li' y carga el contenido y luego vuelvo a hacer clic en el enlace de inicio (regreso a la primera página), el cuadro elegante ya no funciona. Sé que es muy sensible, por lo que es posible que lo hayas entendido mal, así que déjame explicarte de otra manera. Tengo tanto el selector de 'nav li' como el selector del enlace de la caja de fantasía, ¿cuál es el mejor método para que funcionen juntos?

También alguien puede explicarme qué hace el código también.
Gracias.

Answer 1

Ok ... Esto es lo que hace el código:

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

Esta primera parte obtendrá el hash de la página actual, verifique que uno de los '' nav li '' los enlaces terminan con este hash (se esperan 5 caracteres) y, si es el caso, cargarán el elemento #content de la página hash + " .html " en el #content elemento de la página actual (supongo que es un div).

Imagine que carga la url " http: //.../page1.html#page2 " ;. La página1 se cargará y luego, #content de page2.html se cargará mediante una llamada ajax en #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;

    });

Esto agregará el siguiente comportamiento a " nav li " enlaces: cuando se hace clic, muestra un " mensaje de carga " y cargue el # contenido de la página de destino en el elemento # contenido de la página actual.

No tengo idea de por qué este script, a pesar de ser terrible, haría que tu fancybox no se muestre. Supongo que el " nav li " los enlaces cargarán el contenido con una llamada ajax y esto no afectará su fancybox, que ya está cargado, pero cuando hace clic en el enlace de inicio, la página se vuelve a cargar completamente y el código de fancybox no se ejecuta, por una razón. Puede verificar eso agregando una alerta simple:

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

Si la página completa se vuelve a cargar cuando hace clic en el enlace de inicio, y esta alerta no aparece, encontrará la causa de su problema.