[jQuery] 동적으로 추가된 엘리먼트 컨트롤하기

[jQuery] 동적으로 추가된 엘리먼트 컨트롤하기

정적인 엘리먼트는 selector(선택자)를 이용해 쉽게 컨트롤하거나 이벤트를 적용할 수 있습니다.
예를 들면..

$("#button").click(function()
{
   [처리 로직]
});

하지만 이 방법이 먹히지 않는 경우가 있습니다. 바로 jQuery의 append()나 html() 과 같은 메소드들을 통해 유동적으로 추가된 엘리먼트들입니다.

해결 방법은 아래와 같습니다.

$("#button").live("click", function(){
   [처리 로직]
});

하지만 1.7버전 이후에서는 live() 메소드는 사용할 수 없습니다. 대신 아래 방법으로 사용할 수 있습니다.

$(document).on("click", "#button", function(){
   [처리 로직]
});

이는 iOS등의 모바일 디바이스에서 동작이 잘 되지 않는 단점을 개선한 방법이라고 합니다.

%d 블로거가 이것을 좋아합니다: