UpdatePanel and jQuery are incompatible

During the project, we found that jquery became invalid after partial refreshing when UpdatePanel was used. Later, I checked it online and found that the ready event in jquery will run once after the DOM is fully loaded. When UpdatePanel is used, it only performs partial update and does not Reload all the Dom on the page, therefore, the ready event in jquery will not be executed again. Therefore, we can extract the code executed in the ready event, capture the ScriptManager EndRequest event, and execute a jQuery initialization code after each partial update of UpdatePanel:

// Handle conflicts between ajax and ScriptManager. function load () {Sys. webForms. pageRequestManager. getInstance (). add_endRequest (EndRequestHandler);} function EndRequestHandler () {$ (function () {$ ("tbody "). find ("input: checkbox "). each (function (key, val) {$ (val ). click (function () {var cbxId = $ (this ). attr ("id"); var state = $ (this ). attr ("checked"); $. post ("Ajax/UpdateStatus. ashx ", {" id ": cbxId," isChecked ": state," f Id ":" SamID "}, isReturnStatus) ;}); $ (" thead "). find ("input: checkbox "). click (function () {if (confirm ("are you sure you want to update this column of data? ") = True) {var cbxId = $ (this ). attr ("id"); var name = cbxId. substr (16); var v = "tbody. "+ name +" input [type = 'checkbox'] "; if ($ (this ). attr ("checked") = "checked") {$ (v ). attr ("checked", true);} else {$ (v ). attr ("checked", false);} var state = $ (this ). attr ("checked"); $. post ("Ajax/UpdateStatus. ashx ", {" id ": cbxId," isChecked ": state}, isReturnStatus);} else {if ($ (this ). attr ("checked") = "checked") {$ (this ). attr ("checked", false);} else {$ (this ). attr ("checked", true) ;}}) ;}); initCheckedStaus ();}