반응형
동적으로 생성된 코드는 다음과 같이 이벤트를 부여하여야 한다.
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script>
$(function(){
$("#makebtn").click(function(){
var dynamicTag = '<input type="button" id="btn" value="alert"/>';
$("body").html(dynamicTag);
})
// $("#btn").click(function(){ alert("event"); })
$(document).on("click","#btn",function(){
alert("event");
});
})
</script>
</head>
<body> <input type="button" id="makebtn" value="make_button"> </body>
</html>만약 11번 째 소스코드가 실행될 경우 페이지가 로딩될 때 btn 아이디를 가진 태그를 찾는다.
하지만 make 버튼을 클릭해야 btn 아이디를 가진 태그가 생성되므로 해당 태그는 아직 존재하지 않는 상태이며
btn 아이디를 가진 태그는 자바스크립트 클릭 이벤트에 연결되지 않는다.
12번 째 소스코드처럼 on 메소드를 이용하면 특정 이벤트 실행 시 클릭 이벤트에 연결되어 문제가 해결된다.
반응형
'프로그래밍 > 웹' 카테고리의 다른 글
| 자바스크립트 callback(콜백) 함수 (0) | 2021.03.03 |
|---|---|
| 자바스크립트 문법 정리 (0) | 2021.03.02 |
| Python Flask 요청 처리 예제 (0) | 2021.02.20 |
| 자바스크립트 async와 defer 속성 (1) | 2021.02.14 |
| Content-TYPE 헤더와 MIME-TYPE (0) | 2021.02.13 |
