jQuery .load issue when switching content - php

Question

Tristann.tk
On this site click About me and then click back to Home, and then try switching the pages at the bottom, It doesn't change. Why?
jQuery code:
$(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'});
});
The divs are like that:
<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>
The 2 PHP functions return the 5 posts at the start and the page numbers at the bottom.

Answer 1

You'll need to rebind those events after every load because the page_links are being replaced. An easier and cleaner way to do it is to use event delegation. The best way is to use $.fn.on, which performs better and is less buggy than $.fn.live. Also, since the load will replace the page_links you have to do the background-color stuff in a callback:
$(".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'});
});
});
This binds a click event to the .vsebina container and checks to see if the clicked item was a page link. If it was, it will fire your handler. This way, even if the content is replaced, your handler will run.
Read more about $.fn.on vs $.fn.live vs $.fn.delegate vs $.fn.bind here

Answer 2

Your click events are getting disconnected when you load new content. Change your page nav code to use the live() method:
$(".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);
});