1

jQuery の関数でindex.htmlコンテンツをロードするファイルがあります。これにはすべての JS ファイルが含まれます。以下も含まれます。load()index.html

コードは次のとおりです。

$(document).ready(function(){
    function showNewContent() {
      $('#wrapper').fadeIn('normal',hideLoader);
    }
    function hideLoader() {
      $('#load').fadeOut('normal');
    }
    $('#menu li.load a').click(function() {
        // Change Content
        var toLoad = $(this).attr('href')+' #all_content';
        $('#wrapper').fadeOut('fast',loadContent);
        $('#load').remove();
        $('body').append('<div id="load"></div>');
        $('#load').fadeIn(0);
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
        function loadContent() {
            $('#wrapper').load(toLoad,'',showNewContent);
        }
    });

    ...some more code...

    $('.fancy').click(function() {
        $.fancybox.open([
             {
                 href : 'img/img1.jpg'
             }, {
                 href : 'img/img2.jpg'
             }, {
                 href : 'img/img3.jpg'
            }
        ], {
            helpers : {
                thumbs : {
                    width: 75,
                    height: 50
                }
            }
        });
    });
});

別のファイル (news.html) からコンテンツを index.html ファイルにロードしています。この news.html ファイルにはリンクがあります

<a class="fancy" href="javascript:;"><img src='img/img1.jpg' /></a>

しかし、ファンシーボーイは機能しません。どうすればそれを機能させることができますか？

私は今までここで解決策を見つけられませんでした。誰かが何か役に立つものを見つけることができる答えやリンクを持っていれば、それは素晴らしいことです. 前もって感謝します！

4

2 に答える 2

0

このアンカーは動的に読み込まれるため、イベント委任が必要です。クリック イベントを既存の要素にバインドします。

$(document).on('click', '.fancy', function() {
    //do stuff
});
于 2013-06-10T15:11:00.703 に答える
0

document.ready() を使用するよりも、コンテンツを読み込んだ後に呼び出す init-script を使用する方が適切です。document.ready() が呼び出されているとき、コンテンツは存在しません。これがあなたが言及したものであれば、後でロードします。

于 2013-06-10T15:12:47.743 に答える