jQuery UI Dialog 컨트롤의 폼을 정상적으로 제출할 수 없는 문제에 대한 해결 방법_jquery

최근 jQuery UI의 Dialog 컨트롤을 사용할 때 이 컨트롤에 폼을 배치하면 모든 폼을 정상적으로 제출할 수 없는 것을 발견했습니다. 구체적인 증상은 다음과 같습니다.
1. 제출 버튼이 유효하지 않습니다. 클릭 후 반응이 없습니다.

2. 다른 수단을 사용하여 페이지를 제출하더라도 서버는 대화 상자의 양식 데이터를 얻을 수 없습니다.

페이지 소스 코드를 연구한 결과 jQuery UI Dialog 컨트롤이 초기화될 때 동적으로 생성된 HTML 요소가 페이지 끝과 양식 요소 뒤에 추가되었으며 원본 Dialog 템플릿 부분( 양식 요소가 포함된)도 동적으로 생성된 HTML 요소로 이동되었습니다. 즉, Dialog가 초기화된 후 원래 양식에 있던 양식이 양식 외부로 이동되어 Dialog 템플릿의 모든 양식이 유효하지 않게 된 것입니다.

jQuery UI의 Dialog 디자인이 기능인지 버그인지 모르겠습니다. 위의 분석을 바탕으로 Dialog에서 정상적인 페이지 제출을 달성하기 위해 간단한 해결책을 찾았습니다. 즉, Dialog 컨트롤에 의해 동적으로 생성된 HTML 요소를 jQuery UI 컨트롤의 "open" 이벤트 핸들러에 있는 양식 요소로 이동하는 것입니다. 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

$("#dlg ").dialog( {
open: function () {
$("body > div[role=dialog]").appendTo("form#aspnetForm");
}
} );

코드의 "aspnetForm"은 ASP.NET 애플리케이션에서 자동으로 생성된 현재 페이지의 양식 요소 ID입니다. 사용 시 자신의 페이지의 양식 ID로 변경할 수 있습니다. 그것.