Changing content on click

Question

I have a nav bar on the side, and when the user clicks on a link, the nav content changes.  here is my code:
$('#allNav').click(function() {
        $("#allTitle").html("My Files");
        $("#allTitle").load("http://mysite.com/getFiles.php");
        $("#navPane").html("<li><div id='allNav'><strong><a href='#'>~All</a></strong></div></li><li><div id='photoNav'><a href='#'>~Photo Gallery</a></div></li><li><div id='docsNav'><a href='#'>~My Documents</a></div></li></ul> ");
    $('#photoNav').click(function() {
        $("#allTitle").html("Photo Gallery");
        $("#navPane").html("<li><div id='allNav'><a href='#'>~All</a></div></li><li><div id='photoNav'><strong><a href='#'>~Photo Gallery</a></strong></div></li><li><div id='docsNav'><a href='#'>~My Documents</a></div></li></ul> ");
    $('#docsNav').click(function() {
        $("#allTitle").html("My Documents");
        $("#navPane").html("<li><div id='allNav'><a href='#'>~All</a></div></li><li><div id='photoNav'><a href='#'>~Photo Gallery</a></div></li><li><div id='docsNav'><strong><a href='#'>~My Documents</a></strong></div></li></ul> ");
<li><div id="allNav"><strong><a href="#">~All</a></strong></div></li>
<li><div id="photoNav"><a href="#">~Photo Gallery</a></div></li>
<li><div id="docsNav"><a href="#">~My Documents</a></div></li>
</div>
When i click on one link, everything works fine.  then after that, it no longer works when you click on another link in the nav menu. 

Answer 1

here is an example: http://jsfiddle.net/k7p2u/
when you click on a different link, the nav content changes.  but when you click on another one, nothing changes anymore.