1

Tristann.tk 在这个网站上点击关于我，然后点击回到首页，然后尝试切换底部的页面，它没有改变。为什么？

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_links 正在被替换，因此您需要在之后重新绑定这些事件。一种更简单、更简洁的方法是使用事件委托。最好的方法是使用$.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.onvs $.fn.livevs $.fn.delegatevs的更多信息$.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 回答