티스토리 뷰

동적으로 생성된 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
204,270
Today
6
Yesterday
135
«   2018/11   »
        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  
글 보관함