asp.net AJAX Advance Tips & Tricks (5) UpdatePanel with jquery

Objective

Now more and more friends like to use jquery and ASP.net AJAX together, recently, many Indians in forum complained that UpdatePanel and jquery incompatible, many of the jquery effect after UpdatePanel Update does not work. This paper resolves this compatibility problem by analyzing the frame structure of both.

Problem Recurrence:

1. Add ScriptManager and UpdatePanel to the page

2. Add element A in UpdatePanel

3. Add x effect to element a with jquery

4. Add a buttonb as postback in the UpdatePanel

Result: When the first page load, the x effect of element A is normal, click B, page local refresh, at this time, element a loses x effect

Analysis 1:updatepanel

UpdatePanel is mainly used for local refresh in the application and avoids the postback of the whole page.

The core of UpdatePanel implementation of local refresh is Microsoftajaxwebform.js file, its local refresh process is to submit the page to the server (including ViewState), Executes the server-side code and asynchronously renders the HTML within the UpdatePanel.

During this process, the rest of the page does not have a status change.

Analysis 2:jquery

jquery can add a variety of properties and event handles to HTML elements with simple code, where we can see official documents:

Tutorials:How jQuery Works
http://docs.jquery.com/How_jQuery_Works

Here, we can see that jquery has an important event tag "ready", which is generally added to the effects of HTML elements and event handles, as follows:

$(document).ready(function () {
$("p").text("The DOM is now loaded and can be manipulated.");
});

The official explanation for this is that the ready event will run once after the DOM is fully loaded, OK, so the reason for the problem is almost clear: