Question

I’m working on an application that uses JQuery layouts and loads only website parts (like Gmail). Every time I load a “panel” using JQuery I have to substitute some links to make it work with panels (i.e., to load this link content in a panel, not in the full page). Is something like this:

function changeMainPane(href) {
    $("#screen").load(href);
    $("#screen a.ajax-page").click(function () {return
        changeMainPane($(this).attr("href"))
    });
}

This is a very simplified changeMainPane function, mine has tens of $(“#screen …”).click() calls to integrate the new piece of HTML into the page.

The question is: there is any better way to do this? Something like:

$("#screen").ready(function() {
    // All my html setups
}

Or something like “always a user clicks on a link, check if has ajax-page class and the call this function” without having to initialize each link independently.

Answer 1

You can have a look at the delegate method. The delegate method can be registered for the common parent element of all the links on which you wants to reload the main panel. It can be the document object or a lower level element like "body" or another div like "div.mylinks".

$(document).delegate("a.ajax-page", "click", function(){
    changeMainPane($(this).attr("href"))
})