1

Tristann.tk このサイトで About me をクリックしてから Home に戻り、一番下のページを切り替えてみてください。なんで？

jQuery コード:

$(document).ready(function(){
    $(".page_links .page li").click(function(){
        $(".page_links .page li").css({'background-color' : ''});
        $(this).css({'background-color' : '#A5CDFA'});
        $(".posts").load("/includes/data.php?data=pages&page=" + this.className);
    });
    $(".navlist #about_me").click(function(){
        $(".navlist #home").css({'text-decoration' : 'none'});
        $(".navlist #about_me").css({'text-decoration' : 'underline'});
        $(".vsebina").load("/includes/data.php?data=about_me");
    });
    $(".navlist #home").click(function(){
        $(".navlist #about_me").css({'text-decoration' : 'none'});
        $(".navlist #home").css({'text-decoration' : 'underline'});
        $(".vsebina").load("/includes/data.php?data=home");
    });
    $(".navlist #home").css({'text-decoration' : 'underline'});
    $(".1").css({'background-color' : '#A5CDFA'});
});

divはそのようなものです：

<div class="zunanji">
    <div class="glava">
        <div class="meni">
            <ul class="navlist">
                <li><a id="home" href="javascript:void(0)">Home</a></li>
                <li><a id="about_me" href="javascript:void(0)">About Me</a></li>
            </ul>
        </div>
    </div>
    <div class="container">
        <div class="vsebina">
        <? get_posts();
           get_pages();
        ?>
        </div>
        <div class="stranska">
            <h2>Archive</h2>
        </div>
    </div>
</div>

2 つの PHP 関数は、最初に 5 つの投稿を返し、最後にページ番号を返します。

4

2 に答える 2

1

は置き換えられるloadため、毎回これらのイベントを再バインドする必要があります。page_linkこれを行うためのより簡単でクリーンな方法は、イベント委任を使用することです。最良の方法は、を使用すること$.fn.onです。これは、よりもパフォーマンスが高く、バグが少ないです$.fn.live。また、loadが置き換えられるため、コールバックでpage_links処理を行う必要があります。background-color

$(".vsebina").on('click', '.page_links .page li', function(){
    var $page = $(this); // save the page link that was clicked
    var path = "/includes/data.php?data=pages&page=" + this.className;

    $(".posts").load(path, function(){
        $(".page_links .page li").css({'background-color' : ''});
        $page.css({'background-color' : '#A5CDFA'});            
    });
});

これにより、クリックイベントが.vsebinaコンテナにバインドされ、クリックされたアイテムがページリンクであるかどうかが確認されます。もしそうなら、それはあなたのハンドラーを解雇します。このように、コンテンツが置き換えられた場合でも、ハンドラーが実行されます。

$.fn.onvsvsvsの詳細は$.fn.liveこちら$.fn.delegate$.fn.bind

于 2012-11-26T20:46:52.090 に答える
1

新しいコンテンツをロードすると、クリック イベントが切断されます。live()メソッドを使用するようにページ ナビゲーション コードを変更します。

 $(".page_links .page li").live('click',function(){
        $(".page_links .page li").css({'background-color' : ''});
        $(this).css({'background-color' : '#A5CDFA'});
        $(".posts").load("/includes/data.php?data=pages&page=" + this.className);
  });
于 2012-11-26T20:49:08.323 に答える