Php 切换内容时的加载问题

在这个网站上，单击“关于我”，然后单击“返回主页”，然后尝试切换底部的页面，它不会改变。为什么?

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>

档案文件

---

这两个PHP函数在开始处返回5个帖子，在底部返回页码。

您需要在每次

加载后重新绑定这些事件，因为
页面链接正在被替换。一种更简单、更干净的方法是使用事件委派。最好的方法是使用，它比
$.fn.live
性能更好，bug更少。此外，由于
加载
将替换
页面链接
，因此您必须在回调中执行
背景色
操作：

$(".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的详细信息，请参见我的编辑。在
上，我认为约翰描述它的方式更简单。谢谢你的回复。不客气。是的，
live
确实更容易，但它速度较慢，而且可能有bug。如果你好奇的话，看看我答案底部的文章。看起来你只是在一个简单的个人页面上工作，所以你应该很好，但是在将来记住这一点！啊哈，我现在明白你的意思了，这种方法肯定更好。谢谢b但是页面按钮的背景不会返回，$（“.1”）.css（{'background-color'：'A5CDFA'）；每次重新加载“主页”内容时，您都需要调用该函数。因此，将该行添加到#home click事件中。
 $(".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);
  });