[jQuery] DOM 객체에 동적으로 추가 시 이벤트 핸들러 적용하는 방법

on 함수에 대해 전에 블로그에 써놓고 또 까먹어서 찾아보다가 한번 더 정리한다.

작업을 하다보면 자바스크립트(또는 jQuery)로 HTML을 추가하는 경우가 생긴다.
하지만, 자바스크립트로 HTML DOM 생성/추가 하면 이벤트가 안먹히는데
이때 해결 방법에 대해 설명하려한다.

우선, 아무리 셀럭터를 이용해 DOM을 선택해도
동적으로 생성된 DOM은 bind, click, keypress 등의 이벤트를 캐치하지 못한다.
이때 해결책으로 live 를 사용하는 방법이 있는데
사용 예시는 다음과 같다

//.live(events, function)

$("#example").live('click', function(e) {
    // Source Code Start
});

하지만, jQuery 1.9 버젼에서는 live 함수가 is not a function라는 에러가 뜬다.
찾아보니 1.9 버젼 부터는 live 를 사용하지 않고 on으로 처리하는 걸로 바꼈다고 한다.
사용 예시는 다음과 같다

//.on(eventType, selector, function)

$("#parentDiv").on('click', '#example', function(e) {
    // Source Code Start
});

참고사이트 :
http://uiandwe.tistory.com/1107
http://jinolog.com/programming/javascript/2011/03/21/adding-event-handler-dynamically-in-dom.html
http://jinolog.com/programming/javascript/2011/03/21/removing-event-handler-dynamically-in-dom.html
http://inspiredjw.tistory.com/entry/jQuery-%EC%9C%A0%EC%9A%A9%ED%95%9C-%ED%8C%81-%EB%85%B8%ED%95%98%EC%9A%B0-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0
http://snowple.tistory.com/355
http://stackoverflow.com/questions/14354040/jquery-1-9-live-is-not-a-function