jQuery의 이벤트 위임 방식 $(document).on()과 AJAX

 

 

 

 

$(document).on()

$(document).on("click", ".btn-plus", function () {
    // 실행할 코드
});

이 코드는 지금 있거나, 나중에 새로 생길 요소까지 이벤트를 처리하겠다는 의미입니다

 

 

$(".btn-plus").click(function () {
    // ...
});

왜 그냥 .click() 안쓰고 이걸 쓰는가?

 

이 방식은 페이지 로딩 시점에 존재하는 요소에만 이벤트가 연결됨

AJAX로 새로 추가된 요소에는 이벤트가 안걸림

장바구니처럼 비동기로 DOM이 바뀌는 화면에서는 문제 발생

 

 

 

---

 

 

🥞 $(document).on() 의 동작 원리

$(document).on("이벤트", "대상선택자", 함수)

 

이벤트를 document에 먼저 걸어두고

실제 클릭이 발생하면

그 대상이 .btn-plus인지 나중에 검사

 

지금 있든, 나중에 생기든 .btn-plus가 클릭되면 이 함수를 실행해라

 

 

---

 

 

🥞  장바구니 예시로 보면

$(document).on("click", ".btn-minus, .btn-plus", function () {
    const tr = $(this).closest("tr");
    // ...
});

 

AJAX로 장바구니 목록을 다시 그려도

새로 생성된 btn-plus / btn-minus 버튼에도

이벤트가 자동으로 적용됨

 

 

 

 

🥞 언제 꼭 써야 하나

$(document).on()을 써야 하는 경우는 

▪ AJAX로 요소를 동적으로 추가/삭제할 때

▪ 장바구니, 댓글, 모달, 리스트 렌더링

▪ 테이블 행이 자주 바뀌는 경우

 

굳이 사용 안해도 되는 경우는

페이지 로딩 후 DOM이 변하지 않는 경우

정적인 버튼, 메뉴 등

 

 

---

 

장바구니 jsp 파일에 있는 이벤트를 보장!

$(document).on("blur", ".item-count", function(){
    const input = $(this);
    let count = parseInt(input.val()) || 1;
    if(count < 1) count = 1;

    updateCartCount(cartPk, count, tr, input);
});

 

수량 입력창에서 입력을 끝내고 빠져나오는 순간,
이 로직을 실행해라

 

 

 

 

 

여기서 하는 일

 

입력값	처리 결과
-1	1
0	1
abc	parseInt → NaN → 1
빈 값	1

 

 

 

🥞 blur는 뭐야?

입력창(input)에 있던 포커스가 빠져나갈 때 발생하는 이벤트

입력창을 클릭해서 글자를 치다가

다른 곳을 클릭하거나

Tab 키를 눌러 이동하거나

엔터로 다음 요소로 넘어갈 때 

그 순간 blur 이벤트 발생됨

 

 

🥞 blur의 장점

서버 호출 최소화	입력을 다 끝낸 뒤에만 실행
UX 자연스러움	사용자가 입력 중일 때 방해하지 않음
검증 타이밍 적절	최종 입력값만 검사 가능