[작성중] [jQuery] append 등으로 동적 생성한 요소의 이벤트 처리 - jQuery & Javascript & CSS



jquery 에서 append 등으로 추가한 요소에서 이벤트 처리시 정상 작동이 안된다. 

 

가령, 

 

<a id="addButton">Add</a>

<div id="textField"></div>

$(document).ready(function() {

$("#addButton").click(function(){

$("#textField").append("<div class='.testClass'>test</div");

});

$(".testClass").click(function(){

alert(1);

});

});

 

위의 소스에서

 $(".testClass").click(function(){

alert(1);

});

는 작동하지 않는다.

 

Click 핸들러가 정의될 당시 해당 요소가 존재 하지 않았기 때문이다. 

 

따라서 이를 해결하기 위해선

 

click 을 live, delegate, on 등으로 처리해야한다.

(셋의 차이는 아직 모르겠다.)

live, delegate 예는 

http://stackoverflow.com/questions/5589491/jquery-click-event-after-appending-content

에서 확인 가능하다. 

 

on 의 경우는

$(document).on('click', '. testClass', function(){ 

});

 

이런 식으로 변경해주면 된다. 






AD_1