<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script type="text/javascript">
$(function () {
//정적이벤트
//최초에만 가능하고 추가된 element에는 버튼 추가 기능이 없음(부모의 이벤트 없음)
/* $("button[name='add']").on("click", function() {
$('body').append("<button name='add'>B</button>");
}); */
//동적이벤트 가능하게 변경
//추가된 element에 계속해서 부모의 이벤트를 가질 수 있게 만든다
//on(이벤트, 지정자, 구현부function)
$(document).on("click", "button[name='add']", function() {
$('body').append("<button name='add'>B</button>");
});
});
</script>
</head>
<body>
<button name="add">B</button>
</body>
</html>
'JQuery' 카테고리의 다른 글
| 211006_이미지의 배경사진 변경 (0) | 2021.10.07 |
|---|---|
| 211006_on,button(영화관,영화) (0) | 2021.10.06 |
| 211006_on(동적/정적) (0) | 2021.10.06 |
| 21006_animate,button,each (0) | 2021.10.06 |
| 211006_image,each,figure (0) | 2021.10.06 |