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;

    });

});

OK コードは「nav li」リンクを選択し、AJAXの方法でページを表示します。つまり、リロードせずにページを表示します。 これは正しく行われます:) ここで、ユーザーを登録するためのファンシーボックスを追加するために、私がやりたいことはすべてです。そのためには、次のコードを追加する必要があります。

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

コードを$ document.readyfunctionに入れるだけで、ファンシーボックスが正常に機能し、nav liリンクも正常に機能します。 それで、問題はどこにありますか？ 「nav li」リンクをクリックしてコンテンツをロードし、ホームリンクを再度クリックすると（最初のページに戻る）、ファンシーボックスが機能しなくなります。 私はそれが非常に敏感であることを知っているので、あなたがそれをよく理解していないかもしれないので、別の方法で説明させてください。 「nav li」のセレクターと派手なボックスリンクのセレクターの両方がありますが、それらを連携させるための最良の方法は何ですか？

また、コードが何をするのかを誰かに説明してもらえます。
ありがとう。

Answer 1

OK ...コードの動作は次のとおりです。

    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」の1つリンクはこのハッシュで終了し（5文字が必要）、その場合、 hash +＆quot; .html＆quot; ページの #content 要素をにロードします現在のページの#content 要素（divであると仮定）。

url＆quot; http：//.../page1.html#page2 ＆quot;。 Page1が読み込まれ、次にpage2.htmlの#contentがpage1の#contentでのajax呼び出しによって読み込まれます。

    $('#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」に次の動作が追加されます。リンク：クリックすると、「読み込み中のメッセージ」を表示します;ターゲットページの#contentを現在のページの#content要素に読み込みます。

このスクリプトがひどいのにファンシーボックスが表示されない理由はわかりません。私の推測では、「nav li」はリンクはajax呼び出しでコンテンツをロードしますが、これは既にロードされているfancyboxには影響しませんが、ホームリンクをクリックすると、ページが完全にリロードされ、理由によりfancyboxコードは実行されません。簡単なアラートを追加して確認できます：

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

ホームリンクをクリックしたときにページ全体がリロードされ、このアラートがポップアップしない場合、問題の原因が見つかりました。