[Web] jquery 동적 태그 이벤트 적용

지난 시간에 before/after/append/html등을 이용하여 동적으로 태그를 화면에 

삽입했었다. 이렇게 동적으로 추가된 태그는 일반적인 이벤트가 동작되지 않는다.

예를 들어 다음 소스와 같이 코딩해보자

스크립트 부분

    $(function(){
		$("#makebtn").click(function(){
			var dynamicTag = '<input type="button" id="btn" value="경고"/>';
			$("body").html(dynamicTag);
		})
		$("#btn").click(function(){
			alert("!");
		})
	})

html태그소스

<input type="button" id="makebtn" value="버튼생성"/>

다음화면은 '버튼생성'을 클릭하면 '경고'라는 버튼이 화면에 생성된다. 기존 버튼생성버튼은 없어지고 경고버튼이 생성이 되었다. 해당 경고버튼을 누를경우 alert이 떠야 정상인대, alert이 뜨지 않는다.

한번 위소스를 실행해보도록 하자!!!

이유는 동적으로 생성된 태그는 별도의 이벤트 형식으로 지정 해줘야 한다.

예전버전에는 bind, live태그를 1.4.3 전버전에서 사용했는데 jquery사이트에서조차 live이벤트를 사용하지 말라고 하며, 1.4.3이후에는 delegate이벤트가 생겨 한동안 delegate 이벤트를 사용했었다. 

하지만!! 1.7이후버전에는 on이벤트가 생겼다.

 각각의 이벤트들의 단점이 있으니 on 이벤트가 1.7버전에 생겼겠으니!!

1.7이후버전에는 on 태그를 이용하도록 하자!

위에 소스중에서 한줄만 변경만 하면 이벤트가 동작한다.

바로.바로..바로...바로....!!!!

$("#btn").click(function(){  <<<< 이 부분이다.

$(document).on("click","#btn",function(){  <<< 요로케 바꿔보자 ㅎㅎㅎ

on태그 각각에 들어가는 parameter들은 

첫번째 : click / change  등등의 이벤트

두번째 : 이벤트 적용할 타겟 태그

세번째 : 동작 함수

저형식으로 하면 동적으로 생성된 태그들에게 이벤트를 적용할수 있다!!!

출처: https://roqkffhwk.tistory.com/45 [야근싫어하는 개발자]