JavaScript
동적태그 (append,appendChild 등..) 사용시 제이쿼리 이벤트
나호성
2016. 4. 21. 11:48
반응형
append / appendChild / appendTo 등....
위와같은 동적 태그를 사용하여 div를 추가하는 작업을 하였다.
근데 동적으로 추가된 부분에는 일반적인 제이쿼리 이벤트(click / change 등..)가 작동을 하지 않았다.
삽질을 한참 하다가 동적으로 추가된 부분에서는 자바스크립트, 제이쿼리가 작동하지 않는 것을 확인...
원래의 소스이며 일반적으로 사용하는 방식
$("input[type=file]").change(function(){
preview($(this)[0], $(this).attr("class"));
});
동적 태그를 사용한 경우는 아래와 같은 방식을 사용해야 한다.
$(document).on("change","#thum_img",function(){
preview($(this)[0], $(this).attr("class"));
});
on을 사용하는 것이 핵심이며,
on의 매개변수는 on(이벤트, 이벤트타켓 , 함수)을 사용한다.
(*위의 소스는 이미지 미리보기를 위해 작업을 하는 소스로 방식만 확인)
반응형