동적으로 생성된 DOM요소의 JQUERY 이벤트 제어

동적으로 생성된 DOM요소의 JQUERY 이벤트 제어.

Jquery 의 event handler로 자주 사용되는 .on method 가 있다.

대부분의 jquery를 사용한 front-end 구성에서는

onclick 등 이벤트를 제어 하기 위하여 .on method를 주로 사용하게 된다.

보통은 아래와 같은 형태로 사용되곤 한다.

$('#elementId').on('click', function(){
    // 실행문
}

하지만 .ajax를 사용한 비동기 방식을 등을 통하여 동적으로 .html 이나 innerHTML 등으로 DOM이 생성 되었을 때 이벤트가 동작 하지 않는다.

jquery의 API Document를 보면

.on( events [, selector ] [, data ], handler )

위와 같은 형태로도 사용이 가능함을 알 수 있다.

위에 형태를 사용하여 아래 와 같이 동적으로 생성된 DOM 요소의 이벤트를 제어 할 수 있다.

$('#elementId').html('동적으로 생성 된 HTML 요소');

$('#elementId').on('click', '동적으로 생성 된 HTML 요소 selector', function(){
    // 실행문
}

참조 - http://api.jquery.com/on/