jQuery要素セレクタの問題

Question

私の問題は少し複雑です。まず、それはそれをコード化された人は私ではありません、

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

    }); 

}); 

がわかりましたので、私は実際にそれが何をするか理解していないとも私はそれを変更しようとしましたが、私は成功しませんでした：

私は、次のコードを持っています。 コードは 'nav li'リンクを選択し、ページをAJAXの方法で表示します。これは再ロードせずに意味します。 これは正しく行います:) 今、私はすべてのユーザーを登録するためにファンシーボックスを追加したいと思います。これを行うには、次のコードを追加する必要があります。

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

今私はちょうど$のdocument.readyfunctionでコードを入れて、化粧箱はNAV李リンクがうまく機能も、それが必要として動作します。 問題はどこにありますか？ 「nav li」リンクをクリックしてコンテンツを読み込んだ後、再びホームリンクをクリックすると（最初のページに戻ります）、ファンシーボックスは動作しなくなります。 私はそれが非常に敏感であることを知っているので、それを悪いと理解している可能性がありますので、別の方法で説明してください。 私は 'nav li'のセレクタとfancyボックスリンクのセレクタの両方を持っていますが、それらを一緒に使う最良の方法は何ですか？

また、コードが何をしているのか誰かに説明することもできます。
ありがとうございます。

Answer 1

[OK]を...ここでは、コードが何をするかである：5つの文字（「NAV李」リンクの1つが、このハッシュで終わることを確認し、

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

この最初の部分は、現在のページのhashを取得します予期される）、その場合は、現在のページの#content要素に#contentのページのhash + ".html"要素をロードします（これはdivだと思います）。

URL「http://.../page1.html#page2」を読み込んだとします。 Page1がロードされ、page2.htmlの#contentがajax呼び出しによってpage1の#contentにロードされます。

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

    }); 

これは、「NAV李」のリンクに次の動作を追加します：クリックした際に、「ロードメッセージ」を表示し、現在のページの#content要素にターゲットページの#contentをロードします。

このスクリプトがひどいのにもかかわらず、あなたのファンシーボックスが表示されない原因がわかりません。私の推測では、 "nav li"リンクはajaxコールでコンテンツをロードし、既にロードされているfancyboxには影響しませんが、ホームリンクをクリックすると、ページは完全にリロードされ、fancyboxコードは何らかの理由で実行された。あなたがホームリンクをクリックして、このアラートがポップアップしていない場合、完全なページがリロードされる場合

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

、あなたはあなたの問題の原因を発見した：あなたは、単純なアラートを追加することによってことを確認することができます。