UpdatePanel과 Jquery_jquery 간의 충돌 해결 방법

페이지가 처음 로드되면 A 요소의 X 효과는 정상입니다. B를 클릭한 후 페이지가 부분적으로 새로 고쳐지며, 이때 A 요소는 X 효과를 잃습니다.

처음에는 프런트엔드에 문제가 있는 줄 알고 프로그래머에게 갔으나 자세히 살펴본 결과 문제가 없다는 것을 나중에 알고 보니 해당 페이지는 ASP.NET AJAX 부분 새로 고침을 사용하고 있었고, 아마도 JQUERY와 충돌할 가능성이 있다는 것이 분명해졌습니다.

문제 재현: 1. ASP.NET AJAX가 페이지에 ScriptManager 및 UpdatePanel을 추가합니다.
2. UpdatePanel에 요소 A를 추가합니다.
3. jQuery를 사용하여 요소 A에 X 효과를 추가합니다. 포스트백을 위해 UpdatePanel로 이동하는 버튼 B

문제가 발생합니다.

분석 1: UpdatePanel은 전체 페이지의 포스트백을 방지하기 위해 애플리케이션에서 부분 새로 고침에 주로 사용됩니다. UpdatePanel 부분 새로 고침의 핵심은 MicrosoftAjaxWebForm.js 파일에 있습니다. 부분 새로 고침 프로세스는 페이지를 서버(ViewState 포함)에 제출하는 것입니다. 서버 코드를 실행한 후 UpdatePanel의 HTML이 비동기적으로 다시 렌더링됩니다. 이 프로세스 동안 페이지의 다른 부분에는 상태가 변경되지 않습니다.

분석 2: jQuery는 간단한 코드를 통해 HTML 요소에 다양한 속성과 이벤트 핸들러를 추가할 수 있습니다. 여기에서 공식 문서를 볼 수 있습니다: 튜토리얼: jQuery 작동 방식

여기서 jQuery에는 중요한 이벤트 표시인 "ready"가 있음을 알 수 있습니다. 일반적으로 HTML 요소의 효과 및 이벤트 핸들은 다음과 같이 이 준비 이벤트를 통해 추가됩니다. $(“p”).text(“이제 DOM이 로드되었으며 조작할 수 있습니다.”) });

이에 대한 공식적인 설명은 다음과 같습니다. DOM이 완전히 로드된 후 Ready 이벤트가 한 번 실행됩니다. 이제 문제의 원인은 거의 이해되었습니다.

이유: UpdatePanel이 부분적으로 새로 고쳐진 후 그 안에 있는 요소 A가 다시 작성되지만 이때 전체 DOM 트리가 다시 로드되지 않기 때문에 jQuery 준비 이벤트가 트리거되지 않으므로 요소 A는 원래 특수 효과를 잃습니다. .

해결책: 아래와 같이 준비 이벤트에서 실행된 코드를 추출한 다음 ScriptManager의 EndRequest 이벤트를 캡처하여 각 UpdatePanel 부분 새로 고침 후에 jQuery 초기화 코드를 실행할 수 있습니다.