티스토리 뷰

동적으로 생성된 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/

댓글
댓글쓰기 폼
공지사항
Total
205,959
Today
6
Yesterday
15
«   2019/01   »
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31    
글 보관함