정리/Javascript

동적으로 생성된 태그에 click 이벤트 달기

알렉스 페레이라 2023. 5. 25. 16:30

javascript환경에서 동적으로 태그가 그려지는경우에, 해당 태그에 event를 달기 힘들거나, 일일히 달기 귀찮을때 사용할 수 있는 방법이다.

 

원래같으면 다음과 같이 작성했을것이다.

function testcode(){
	$('.plupload_done input[type=radio]').click(function(){
    	alert('test!!');
    });
}

 

만약 해당스크립트가 선언될때 DOM이 그려져 있다면 아무 문제가없이 동작할 것이다. 하지만 해당 function이 선언된 후에, 즉 특정 동작을 통해 동적으로 생긴 태그라면 해당 동작은 동작하지 않는다.

 

이럴땐 다음과같이 작성하면 된다.

function testcode(){
	$(document).on("click", ".plupload_done input[type=radio]", function(){
    	alert('test!!');
    });
}

위와 같이 작성하면 동적으로 생성된 태그에 이벤트를 연결 할 수 있다.