Question

I’m trying to load a few div’s using JQuery .load(), one of those being the div containing the links from where to load from. Here’s the code:

$(".category").click(function(e){
    e.preventDefault();
    var link = $(this).attr("href");

    $('#right_options').load(link+' #right_options');
    $('#center_content_title').load(link+' #center_content_title');
    $('#center_content').load(link+' #center_content');
});

The first time works great but the second time instead of loading using jquery it loads the entire page by following the link, not detecting the click, the class or something.
Where’s the problem on loading like this?

Answer 1

Do any of those three load calls change the a element, i.e., the $(“.category”) element? If so, then the binding done through the call to .click is removed when the element changes. If that is the case, you’ll need to use .live(“click”, … instead of the click method. Or in other words, you would replace this:

$(".category").click(function(e){

with this:

$(".category").live("click", function(e) {