jQuery Ajax-没有jQuery CSS

Question

I am trying to navigate through pages with ajax. I have a header and footer a div with id="content" between those two. What I want to do is to replace the content, in order to this I have an onclick on a button that starts the following JavaScript method:

$("#content").load("home.html", function() {
    });

Well it works, but the problem is that the stuff in home.html doesn't have the jQuery css. I tried to link it in the home.html file. It actually works then but it duplicates the footer like this:

http://i.stack.imgur.com/x8TZF.png (I cannot post pictures, because of reputation..)

I just cannot found something on the web, probably because it's hard to describe this issue in a few words.

I hope someone can help me out. :)

Thanks.

Answer 1

When loading content from another HTML page into the current page with jQuery, I've found $.load() to be difficult to work with and quite inflexible at times.

Another approach is to use the $.get() method and parse the returned HTML, like this:

$.get('home.html', function(response){    
    var myHtml = $('#content', response); //get the section of HTML we want
    $('#content').html(myHtml); //load the returned content into the current page    
});

This doesn't work all that well if you're using the same ID for the selectors (I normally use a class) but aside from that it gives you much more control over what gets loaded.

Hope this helps.

http://api.jquery.com/get/