Controls in UpdatePanel losing JQuery Events

Question

I have a button that is within an updatepanel control. The button's click event has a function defined for it through JQuery. Once the async postback completes the JQuery event fails to fire when the button is clicked subsequently. What do I need to do to correct this behavior and maintain the JQuery event attachment to the button's click event once it has been refreshed asynchronously?

Answer 1

put your jquery event handler binding inside the following function

function pageLoad(sender,args) {

    // binding code here, for example
    $('#button').click(function(e) {
        // do something when the click event is raised
    });

}

pageLoad is executed after every postback, synchronous or asynchronous. pageLoad is a reserved function name in ASP.NET AJAX that is for this purpose. $(document).ready() on the other hand, is executed only once, when the DOM is initially ready/loaded.

See this Overview of ASP.NET AJAX client lifecycle events