php - 切换内容时 jQuery .load 问题

Question

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 个帖子和底部的页码。

Answer 1

您需要在每次 load 后重新绑定(bind)这些事件，因为 page_link 正在被替换。一种更简单、更简洁的方法是使用事件委托(delegate)。最好的方法是使用 $.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'});            
    });
});

这会将点击事件绑定(bind)到 .vsebina 容器并检查点击的项目是否是页面链接。如果是，它将解雇您的处理程序。这样，即使内容被替换，您的处理程序也会运行。

Read more about $.fn.on vs $.fn.live vs $.fn.delegate vs $.fn.bind here