Solution to conflict between UpdatePanel and Jquery

When the page is loaded for the first time, the X effect of element A is normal. After clicking B, the page is partially refreshed. At this time, when returning to A, element A loses the X effect.

At first I thought there was a problem with the front-end and I went to the programmer, but after careful inspection I found that there was no problem. Later I learned that the page uses ASP.NET AJAX partial refresh, and it became clear that it was probably in conflict with JQUERY.

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

The problem arises.
Analysis 1: UpdatePanel is mainly used for partial refresh in applications to avoid Postback of the entire page. The core of UpdatePanel's partial refresh lies in the MicrosoftAjaxWebForm.js file. Its partial refresh process is to submit the page to the server (including ViewState). After executing the server code, the HTML in the UpdatePanel will be asynchronously re-rendered. During this process, no state changes to other parts of the page.

Analysis 2: jQuery can add various attributes and event handlers to HTML elements through simple code. We can see the official documentation here: Tutorials: How jQuery Works

Here, we can learn that jQuery has an important event mark "ready". Generally, the effects and event handles of HTML elements are added through this ready event, as follows: $(document).ready(function ( ) { $(“p”).text(“The DOM is now loaded and can be manipulated.”); });

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

Reason: Because after the UpdatePanel is partially refreshed, element A in it is rewritten, but the entire DOM tree is not reloaded at this time, so the jQuery ready event is not triggered, so element A loses its original special effects. .

Solution: We can extract the code executed in the ready event, and then by capturing the EndRequest event of ScriptManager, execute the jQuery initialization code after each UpdatePanel partial refresh, as shown below:

Solution to conflict between UpdatePanel and Jquery_jquery