$('#dialog').dialog에 중점을 두고 코드를 추적할 때 JQuery 구현 코드가 어떻게 작성되는지 살펴보겠습니다. _create 메소드를 Dialog 클래스에서 발견했는데, 다음 코드를 보면
.hide( )
.addClass(uiDialogClasses options.dialogClass)
.css({
zIndex: options.zIndex
})
// tabIndex를 설정하면 div에 포커스가 가능해집니다.
// 개요 설정 0으로 설정하면 Mozilla
.attr('tabIndex', -1).css('outline', 0).keydown(function(event) {
if (options.closeOnEscape && event )에서 포커스에 테두리가 표시되지 않습니다. keyCode &&
event.keyCode === $.ui.keyCode.ESCAPE) {
self.close(event)
event.preventDefault()
}
})
.attr({
role: 'dialog',
'aria-labelledby': titleId
})
.mousedown(function(event) {
self.moveToTop(false, event );
}),
div도 동적으로 생성하므로 해당 div를 Body에 추가한 다음
에서 대화 상자의 요소를 제거합니다. 새 div에 추가하세요....
이것이 $("#test").empty() 후에 내부 대화 상자에 아무런 영향을 미치지 않는 이유입니다! 그리고 이것은 최악의 상황이며 메모리 누수가 발생하기 가장 쉽습니다. Body에 div를 동적으로 생성하므로 양식이 닫히지 않으면 계속해서 위의 TestAppend 메서드를 사용하여 DOM을 동적으로 로드하게 됩니다. N개의 div를 생성합니다!
사실 이 문제에서 답답한 부분은 어떻게 해결하느냐가 아니라 깊고 찾기 어려운 내용이 숨어있습니다! 그런 다음 이를 발견하면 솔루션이 훨씬 간단해집니다.
$('#dialog').parent().empty()
$('#dialog').parent(); .remove( );
}
이 코드를 추가한 후 $("#dialog")를 실행하여 테스트해 보니 드디어 예상한 결과가 나왔습니다! 대화 상자 요소가 사라졌습니다!