It's not jQuery. load
is loading the resource. The thing is, though, that then that HTML is put in your current document, and so all links within that HTML are resolved relative to the current document, not relative to the URL you loaded.
You'll either have to make those root-relative paths, or use get
to get the HTML and pre-process it yourself.
I haven't tried it, but you might play with a base
element, dynamically adding it before doing the load
(with the appropriate base URL derived from the href
you're loading) and then removing it when the load is complete.
Edit: Yup, using base
works:
$("nav").delegate("a", "click", function() {
// *** Added var to next line
var href = $(this).attr('href');
// *** Added base
var base = $('<base href="' + href + '">');
// *** Put base in head
$("head").append(base);
history.pushState(null, null, href);
$('#main').contents().hide();
$('#main').load(href + " #main", function() {
// *** Remove base; I *think* at this point it's already
// been used (worked in my test, anyway)
base.remove();
});
return false;
});
Note that I added a var
before your href
variable. It looked like you were falling prey to The Horror of Implicit Globals.