jQuery does not work properly after ajax partial postback

Don't get shocked by the title of the post. This is true. Recently I have faced this issue. Let us walkthrough of what we are talking about. We all are familiar with below code. A script manager, update panel and content template. As you see I have placed 2 buttons. One gets binded on document.ready() function and other does a async postback.

Just run this page. Click on btnClient and you will see an alert('I am clicked') message. Now click on btnServer event. An async postback occurs. Now again click on btnClient button. Oops!! No alert this time. :(

Well, just for the info that document.ready() event is fired when you DOM is ready. It does not fire on ajax async postback. So it doesn't reattach the functionality to the elements. So what to do now? Well, jQuery has introduced a new function called live() in jQuery 1.3.2 which can solve your purpose.

Add a pageLoad() function in the page and put all your jQuery within it. pageLoad() function is available in JavaScript if you are using ASP.NET ajax. AJAX framework automatically wires up any client-side function named pageLoad() as an Application.Load handler. Both examples are same.

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..