[jQuery] 동적으로 추가된 요소에 대해 이벤트 바인딩하는 방법

1. 문제 상황

만약 jQuery를 사용하여 동적으로 element를 추가한 후에 $(document).ready() 이벤트가 작동하지 않는다면, 이는 이벤트가 DOM에 새로운 요소가 추가되기 전에 바인딩 되었기 때문일 수 있다.

이를 쉽게 설명하기 위해 예시를 들어보겠다.

아래는 일반적으로 jQuery에서 on() 메서드로 이벤트 핸들러를 연결하는 코드이다.

 

$(document).ready(function() {
  // 이벤트 핸들러를 특정 요소에 연결한다.
  $('.itemCheckBox').on('click', function() {
    // 이벤트 처리 코드
    // ...
  });
});

이렇게 이벤트 핸들러를 연결하고 나면, jQuery를 사용하여 나중에 동적으로 추가된 .itemCheckBox 요소에 대해서는, 이벤트 핸들러가 작동하지 않는다.

이런 경우 이벤트 위임(event delegation)* 을 사용하여 이벤트 핸들러가 $(document).ready.. 시점에 존재하지 않는 요소에도 연결되어 동작하도록 구성할 수 있다.

 

 

 

2. Event delegation의 개념 및 사용 예시

이벤트 위임(Event delegation)이란? HTML DOM에서 부모 요소에 이벤트 핸들러를 할당하고, 하위 요소들의 이벤트를 부모 요소에서 처리하는 기술이다. 이를 통해 성능 개선, 동적 요소 처리, 코드 간결성 등의 이점을 얻을 수 있다. 이벤트 위임을 구현하려면 부모 요소를 선택하고, 해당 요소에 이벤트 핸들러를 할당하면 된다.

 

다음은 jQuery에서 on() 메서드로 이벤트 위임을 사용하는 예시이다.

$(document).ready(function() {
  // 이벤트 핸들러를 상위 요소에 연결한다.
  $(document).on('click', '.itemCheckBox', function() {
    // 이벤트 처리 코드
    // ...
  });
});

위 코드에서 $(document).on('click', '.itemCheckBox', ...)는 클릭 이벤트 핸들러를 문서에 연결하지만, 실제 이벤트 처리 코드는 .itemCheckBox 요소가 클릭되었을 때에만 실행된다. 이 접근 방식을 통해 동적으로 추가된 요소에 대해 올바르게 이벤트 처리가 되도록 할 수 있다.

'.itemCheckBox'를 동적으로 추가된 요소에 해당하는 적절한 선택자로 대체해야 한다. 문서 준비 시에 이미 실행된 $(document).ready() 이벤트를 고려하여 성능을 향상시키기 위해 $(document) 대신 문서 준비 시에 존재하는 다른 상위 요소를 사용할 수도 있다.

 

 

 

3. 결론

이와 같이 이벤트 위임(Event delegation)을 사용함으로써, 동적으로 추가된 요소와 기존 요소 모두에 대해 이벤트 핸들러가 작동하도록 보장할 수 있다.