<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel = "stylesheet" href = "../css/mystyle.css" type="text/css">
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
// $(document).delegate('.but', 'click', function(){ })
$('.cd').on('click', '.but', function(){
nbut = $('<button class="but" type = "button" >확인</button>')
$('#result1').append(nbut);
})
$('#clear').on('click', function(){
$('.cd').off('click');
// $(document).undelegate('click');
})
})
</script>
</head>
<body>
<div class = "box">
delegate : <br>
$(document).delegate('.but', 'click', function(){ })<br>
$('.cd').on('click', '.but', function(){ })<br><br>
기존의 미리 만들어진 요소뿐만 아니라 <br>
새롭게 생성되는 요소에도 똑같은 이벤트 핸들러가 적용되어 실행된다 <br>
document 대신 이벤트 대상의 부모 요소가 올 수 있다<br>
<br>
<div class="cd">
<button class = "but" onclick="button">확인</button>
</div>
<button type="button" id="clear" >해제</button>
<div class="cd" id ="result1"></div>
</div>
</body>
</html>
신입 개발자 입니다!!!