jquery needs to rebind events on partial page postback

Question

Hi,

How can I rebind my events (jquery) when I perform a partial page postback?

I am wiring everything up using:

$(document).ready(function(){};

After a partial page postback, my events are not firing.

Answer 1

I'm guessing from 'partial page postback' you're working in Asp.net land.

Try using Sys.Application.add_load(function() { });

You should still be able to use all the normal jQuery stuff inside that func.

Answer 2

Some DOM elements are replaced when you do a partial postback, and of course, the new elements will loose jQuery bindings. You can use the ScriptManager class to register a script that will be executed after the partial postback finishes (have a look here)

Answer 3

You can either tap into the PageRequestManager endRequestEvent:

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(){});

Or if it is control events you're trying to attach, you can use jQuery live events.

Another option is to do the event delegation manually. It is what the "live" event are doing under the covers. Attach the event handler to the document itself, then conditionally execute your method if the sender of the event was element you expect.

$(document).click(function(e){  
    if($(e.target).is(".collapseButton")){  
        $(this).find(".collapsePanel").slideToggle(500);  
    }  
})

Answer 4

Check out the "live" feature of jQuery 1.3 here. You can add events to future elements as well as current elements on the page. This may simplify the code you'll need to write.