jQuery Element Selektor Ausgabe

Question

Mein Problem ist ein bisschen komplex.

Ich habe den folgenden Code:

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

    }); 

}); 

Okay, zuerst mich ist es nicht, wer es codiert, so dass ich wirklich nicht verstehen, was es tut, und auch habe ich versucht, es zu ändern, aber ich war nicht erfolgreich . Der Code wählt einen 'nav li' Link aus und zeigt die Seite in AJAX-Weise an, dh ohne erneut zu laden. Es tut das richtig :) Jetzt möchte ich es tun, um eine fancybox hinzuzufügen, um Benutzer zu registrieren. Um das zu tun, sollte ich den folgenden Code hinzufügen.

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

jetzt habe ich nur den Code in $ document.readyfunction und die Phantasie Box funktioniert, wie es sollte, auch die nav li Links gut funktioniert. Wo ist das Problem? Wenn ich auf einen "nav li" -Link klicke und den Inhalt lade und dann erneut auf den Home-Link klicke, (ich kehre zur ersten Seite zurück), funktioniert die Phantasie-Box nicht mehr. Ich weiß, dass es sehr empfindlich ist, vielleicht hast du es schlecht verstanden, also lass es mich auf eine andere Art erklären. Ich habe sowohl den Selektor des 'nav li' und den Selektor der fancy box link, was ist die beste Methode, um sie zusammen zu arbeiten?

Auch kann mir jemand erklären, was der Code als auch der Fall ist.
Vielen Dank.

Answer 1

Ok ... Hier ist, was der Code tut:

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

Dieser erste Teil der hash der aktuellen Seite erhalten wird, prüfen Sie, ob eine der „nav li“ Links mit diesem Hash-Enden (5 Zeichen erwartet), und wenn es der Fall ist, lädt das #content Element der Seite hash + ".html" in der #content Element der aktuellen Seite (ich nehme an, es ist ein div).

Stellen Sie die URL "http://.../page1.html#page2" laden. Seite1 wird geladen und #content von page2.html wird dann von einem Ajax-Aufruf in #content von page1 geladen.

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

    }); 

Dies wird das folgende Verhalten zu „nav li“ Links hinzufügen: bei Anklicken die „Lademeldung“ zeigen und die #content der Zielseite in #content Elemente der aktuellen Seite laden.

Ich habe keine Ahnung, warum dieses Skript, obwohl es schrecklich ist, würde Ihre Phantasie-Box nicht zeigen. Meine Vermutung ist, dass die "nav li" -Links den Inhalt mit einem Ajax-Aufruf laden werden und dies hat keinen Einfluss auf Ihre fancybox, die bereits geladen ist, aber wenn Sie auf den Home-Link klicken, wird die Seite komplett neu geladen und der fancybox-Code nicht ausgeführt, aus einem Grund. Sie können das überprüfen, indem Sie eine einfache Benachrichtigung hinzufügen:

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

Wenn die ganze Seite neu geladen wird, wenn Sie das Haus Link klicken, und diese Warnung Popup nicht, können Sie die Ursache des Problems gefunden.