문제상황
a.jsp가 처음 로드될 때 b.jsp파일을 추가하는 경우
b.jsp에 작성했던 이벤트 함수들이 정상적으로 동작하지 않는다.
의문점과 시도
-
b.jsp에 c버튼이 있었다면 해당 c버튼에 이벤트가 정상적으로 동작을 했었는데 a.jsp에서 비동기로 불러와서 넣었을 때는 이벤트가 적용되지 않았다.
➡️ 이벤트 핸들러는 각각의 페이지에서만 동작하는 독립된 실행환경이므로 여러페이지의 이벤트가 공유되지는 않는다. 따라서 b.jsp에서 작성했던 이벤트들은 a.jsp에서 가져왔을 때에는 이벤트가 적용되지 않는다.
-
a.jsp에 b.jsp의 스크립트 코드를 옮긴다면??
➡️ 비동기로 받아오기 때문에 b.jsp가 로드된 이후에 스크립트가 동작한다는 것을 보장할 수 없다. 따라서 이러한 방식으로는 해결할 수 없다.
해결법
부모요소에 이벤트를 주어서 자식요소에게 전파되는 속성을 이용한다.
예를 들어 b.jsp가 들어갈 곳의 부모요소에 이벤트를 주어서 이후에 들어온 요소들도 자식요소로써 이벤트가 적용되는 것을 보장받을 수 있다.
$(document).ready(function() {
// 부모 요소에서 자식 버튼의 클릭 이벤트 처리
$("#balist")
.on("click", ".ba-button", function() {
selectBaId = this.getAttribute('data-baid');
$('#baidValue').val(selectBaId);
})
.on("click", "#changeBtn", function () {
const $baForm = $("#baForm");
const url = $(baForm).attr("action");
const method = $(baForm).attr("method");
const data = $(baForm).serialize();
console.log(url);
$("#cancelBtn").trigger("click");
$.ajax({
url : url,
method : method,
data: data,
dataType : 'html',
success : function(data) {
console.log("성공");
console.log(data);
console.log("baLISD", $('#balist'));
$('#balist').html(data);
},
error : function(jqXHR, status, error) {
console.log(jqXHR);
console.log(status);
console.log(error);
}
});
});
});핵심정리 (gpt)
핵심 개념은 부모에게 이벤트를 주는데 선택자로 특정자식요소로 한정하고 이벤트를 위임하는 형식으로 동적으로 생성된 자식요소에게도 이벤트가 적용되는 방법이다.
이 개념은 jQuery에서 이벤트 위임(Event Delegation)이라고 알려져 있습니다. 이벤트 위임은 이벤트를 하위 요소에 직접 연결하는 대신 상위 요소에 이벤트 리스너를 추가하고, 상위 요소에서 하위 요소로 이벤트가 전파될 때 해당 이벤트를 캐치하여 처리하는 패턴입니다.
jQuery에서on메서드를 사용할 때, 이벤트 위임을 설정하는 데 사용할 수 있는 세 번째 인자는 선택자(selector)입니다. 이 선택자는 이벤트가 발생했을 때 실제로 이벤트 핸들러를 실행할 대상을 지정합니다.
여기서 주어진 코드에서는#content요소에 이벤트 리스너를 추가하고, 그 안에서 실제로 클릭된 요소가a.view-link인 경우에만 이벤트 핸들러를 실행하도록 설정되어 있습니다. 이것은 코드가 더 효율적으로 이벤트를 관리하고, 동적으로 추가되는 하위 요소에 대해서도 동일한 이벤트를 적용할 수 있도록 합니다.
참고
https://velog.io/@jun7867/JavaScript-%EB%A9%B4%EC%A0%91-%EC%A4%80%EB%B9%84
