UpdatePanel and Jquery conflict solution _ jquery

When the first page is loaded, the X Effect of Element A is normal. After clicking B, the page is refreshed locally. At this time, element A returns to A, and the X effect is lost. later I learned about the application of ASP on the page. NETAJAX partial refresh, which is clear. It is estimated that it is in conflict with JQUERY. When the first page is loaded, the X of element A works normally. After clicking B, the page is partially refreshed, return to A, and element A loses the X effect.

I thought it was a front-end. I had a problem with the programmer here, but I checked it carefully and found that I didn't. Later I learned about the application of ASP on the page. net ajax partial refresh, which makes it clear that it is probably in conflict with JQUERY.

Problem reproduction: 1. Add ScriptManager and UpdatePanel to ASP. NET AJAX
2. Add element A to UpdatePanel.
3. Use jQuery to add X to element
4. Add a Button B in UpdatePanel for postback.

In this way, the problem arises.
Analysis 1: UpdatePanel is mainly used for partial refresh in applications to avoid the Postback of the entire page. The core of UpdatePanel local refresh is MicrosoftAjaxWebForm. js file. Its partial refresh process is to submit the page to the server (including ViewState). After the server code is executed, the HTML in UpdatePanel is re-rendered asynchronously. In this process, the status of other parts of the page does not change.

Analysis 2: jQuery can add various attributes and event handles to HTML elements through simple code. Here we can see the official document: Tutorials: How jQuery Works

Here, we can know that jQuery has an important event mark "ready". Generally, the effect of HTML elements and the event handle are added through this ready event, as shown below: $ (document ). ready (function () {$ ("p "). text ("The DOM is now loaded and can be manipulated. ");});

The official explanation for this is: The ready event will run once after the DOM is fully loaded. OK. At this point, the cause of the problem is almost clear:

Cause: After UpdatePanel is refreshed locally, element A is overwritten, and the entire DOM tree is not reloaded at this time. Therefore, the ready event of jQuery is not triggered, therefore, element A loses its original special effect.

Solution: we can extract the code executed in the ready event, capture the ScriptManager EndRequest event, and execute the jQuery initialization code after each partial UpdatePanel refresh, as shown below:

Finally, you need to add