이벤트로 노드를 추가할 때 추가된 노드는 이벤트 등록이 안된다.
그것을 버블링을 이용하여 해결해보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>신규 추가 메뉴에 이벤트 등록 방법</title>
<script src="../../js/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function () {
var $menu = $("ul.menu");
var count = 0;
// (1) 새로 추가된 메뉴항목에는 클릭 이벤트가 등록 안됨
/*
$("#addBtn").click(function () {
count++;
$menu.append("<li>new Menu" + count + "</li>");
});
*/
// (2) 항목 추가 후 이벤트를 바로 등록
/*
$("#addBtn").click(function () {
count++;
var $newMenu = $("<li>new Menu" + count + "</li>");
// 새로운 메뉴에 클릭 이벤트 등록
$newMenu.click(function(){
console.log($(this).html());
});
$menu.append($newMenu);
});
$("ul li").click(function () {
console.log($(this).html());
});
*/
// (3) 버블링을 이용하여 신규메뉴에 이벤트 처리
$("#addBtn").click(function () {
count++;
var $newMenu = $("<li>new Menu" + count + "</li>");
$menu.append($newMenu);
});
$menu.on("click", "li", function(){
console.log($(this).html());
});
});
</script>
</head>
<body>
<input type="button" id="addBtn" value="add button"><br>
<ul class="menu">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
</body>
</html>
728x90
반응형
'HTML > Javascript 기초' 카테고리의 다른 글
| [Javascript] 마우스오버와 마우스아웃 (0) | 2020.08.05 |
|---|---|
| [Javascript] 사용자 정의 이벤트 (0) | 2020.08.05 |
| [Javascript] 버블링 기초 - 1 (0) | 2020.08.05 |
| [Javascript] 이벤트 방해하기 (0) | 2020.08.05 |
| [Javascript] 이벤트 제한하기 (0) | 2020.08.05 |
