0

HTMLメニューアンカーのあるページがあります。コンテンツを取得するページはj Query load()、指定された URL を介したリンク クリックからのものです。最初のページには Page2 としてメニュー リンクがあり 、Page3はPage2を クリックし、 j Queryload()を介してコンテンツをロードするとします。さらにメニュー アンカー リンクpage3 、 indexを持つロードされたページ コンテンツ。page3 をクリックしているときに動作しj Query load()ません。コンテンツがさらなるリンクからロードされていないことを意味します。

将来のリンクが機能しない理由

http://jsfiddle.net/naresh_kumar/prLN6/5/

コード index.html

 <html>
        <head>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
            <script>
                $(document).ready(function(){
                    $(".showMenu").on("click",function() {
                        $(".ulMenu").fadeIn().css({ 'display':'block'});
                    });

                    $('.ulMenu').mouseleave(function() {
                        $(this).fadeOut('slow').css({ 'display':'none'});
                    });

                    $('ul.ulMenu li a').on("click",function(e) {
                            e.preventDefault();
                            $("#container").load(this.href, function(){

                            }).hide().fadeIn('fast');
                            return false;
                        });
                })
            </script>
            <style>
                .ulMenu{ display:none;}
            </style>
        </head>
        <body>
            <div id='container'>
                <div id='mainPage'>
                    <div id='mainPageMenu'>
                        <ul class='showMenu'><li>Show menu</li></ul>
                        <ul id='mainPageMenuUl' class='ulMenu'>
                            <li class="menu"><a href='page2.html'>Page2</a></li>
                            <li class="menu"><a href='page3.html'>Page3</a></li>
                        </ul>
                    </div>
                    Main page Main page Main page Main page Main page Main
                </div>
            </div>

        </body>
    </html>

page2.html

<div id='page2'>
    <div id='page2Menu'>
        <ul class='showMenu'><li>Show menu</li></ul>
        <ul id='page2MenuUl' class='ulMenu'>
            <li class="menu"><a href='page3.html'>Page3</a></li>
            <li class="menu"><a href='index.html'>Main Page</a></li>
        </ul>
    </div>
    page 2 page 2 page 2 page 2 page 2 page 2 page 2  
</div>

page3.html

<div id='page3'>
    <div id='page3Menu'>
        <ul class='showMenu'><li>Show menu</li></ul>
            <ul id='page3MenuUl' class='ulMenu'>
                <li class="menu"><a href='page4.html'>Page4</a></li>
                <li class="menu"><a href='index.html'>main Page Menu</a></li>
            </ul>
    </div>
    page 3 page 3 page 3 page 3 page 3 page 3 page 3 page 3 
</div>
4

1 に答える 1

2

これがあなたの問題です

$('ul.ulMenu li a').on("click", function (e) {
    e.preventDefault();
    $("#container").load(this.href, function () {   // you are replacing the html contents with the returned data
    }).hide().fadeIn('fast');
    return false;
});

これらは DOM にロードされたばかりの新しい要素であるため、バインド時に存在しなかったため、イベント ハンドラーが関連付けられていません。あなたがしなければならないことは

バインド時に存在し、静的になる親に委任する

#container div にロードしているので、いつでもその要素にバインドできます

$("#container").on('click','.showMenu',function(){
     $(".ulMenu").fadeIn().css({ 'display':'block'});
});

$('#container').on('mouseleave','.ulMenu',function(){
     $(this).fadeOut('slow').css({ 'display':'none'});
});

$('#container').on('click','ul.ulMenu li a',function(e){
      e.preventDefault();
      $("#container").load(this.href, function(){

      }).hide().fadeIn('fast');
      return false;
});

または、要素が読み込まれた後に、success 関数の新しいイベント ハンドラーを要素にバインドします。

于 2013-03-13T18:38:03.480 に答える