티스토리 뷰

[JS] 동적으로 생성된 태그 이벤트

JoonPyo-Hong 2021. 7. 17. 21:57
반응형
태그를 동적으로 생성한 후 - append, html 등 ..
<style>
	#parent{
          width : 100px;
          height : 100px;
          border : 1px solid black;
  	}
</style>
<body>
	<div id = "parent"></div>
<script>
$("#parent").click(function(){ // append 이벤트
	$("#parent").append("<button id ='child' value='1234'>버튼</button>");
}); 

$("#child").click(function(){ // 동적으로 생성된 button
	alert($(this).attr("value"));
}); 

</script>
</body>

동적으로 추가된 태그에는 이벤트가 동작하지 않는다.

이벤트가 동작하지 않는 이유 - [JS] 웹 페이지 HTML 렌더링

$("#child").click(function(){}은 이미 렌더링 되어서 동작하지 않는 것이다.

페이지가 로드 될 때 Script - $("#child").click(function(){}은 있는데 html의 태그- #child가 없어서 (append 하기 전에)

$(document).on("click", "#child", function(){ // on 이벤트로 변경
	alert($(this).attr("value"));
});

 

위와 같이 on 을 사용하여 해결 할 수 있다.

on  - 이벤트를 실행할 때 그 실행하는 순간, 바로 그 자리에서 찾아 연결해주는 메서드

 

attr()를 활용해서 동적으로 생선된 태그의 속성값(value)을 가져 올 수 있다. 

attr, prop에 대해서  - [JS] 태그 속성값 (attr, prop)

 

반응형
저작자표시

'[JS]' 카테고리의 다른 글

[JS] disabled, readonly 사용법과 차이점  (8) 2021.07.28
[JS] jQuery is not defined, $ is not defined 오류  (1) 2021.07.27
[JS] 문자열 공백 제거하기 (trim, replace, 정규식)  (0) 2021.07.25
[JS] 태그 속성값 (attr, prop)  (0) 2021.07.19
[JS] 이벤트 캡처링(capturing)과 버블링(bubbling)  (0) 2021.07.16
댓글
반응형