Using hashchange to load dynamic pages not working with secondary nav - ajax

Question

Any ideas on why this won't work. I am using the tutorial from CSS-Tricks using AJAX to load pages dynamically. This works fine up until I introduced a secondary navigation on some pages which caused pages to load normally.
This is the code I am using. I am using classes to style the different nav areas.
$(function() {
var newHash = "",
$mainContent = $("#main-content"),
$pageWrap = $("#page-wrap"),
baseHeight = 0,
$el;
$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $mainContent.height();
$("nav").delegate("a", "click", function() {
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function(){
newHash = window.location.hash.substring(1);
if (newHash) {
$mainContent
.find("#guts")
.fadeOut(200, function() {
$mainContent.hide().load(newHash + " #guts", function() {
$mainContent.fadeIn(200, function() {
$pageWrap.animate({
height: baseHeight + $mainContent.height() + "px"
});
});
$("nav a").removeClass("current");
$("nav a[href="+newHash+"]").addClass("current");
});
});
};
});
$(window).trigger('hashchange');
});
Website: http://darynjohnson.com/Medical%20Futures/about.php

Answer 1

Those new created links do not have any events bound to them because u set delagate function on the the object which is not changed. New added objects with the same tag ("nav" here) won't get delagation.
Use:
$('#page').delegate("nav a", "click", function() {
window.location.hash = $(this).attr("href");
return false;
});
Also I recommend you to upgrade jQuery to the newest version and replace delegate() with on()