• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>jQuery Event</title>
7
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
8
    <script>
9
        $(function() {
10
            $("ul").on("click", "a", function(event) {
11
                event.preventDefault();                 // <a>요소의 클릭시 기본 동작인 링크의 작동을 중지시킴.
12
                $("#text").append("이 링크는 동작하지 않습니다!<br>");
13
            });
14
            $("button").one("click", function() {
15
                $("ul").append('<li><a href="/jquery/intro">jQuery</a></li>');
16
            });
17
        });
18
    </script>
19
</head>
20
​
21
<body>
22
​
23
    <h1>이벤트의 위임</h1>
24
    <p>아래 버튼을 눌러 링크를 추가하고, 링크를 클릭해 보세요!</p>
25
    <ul>
26
        <li><a href="/html/intro">HTML</a></li>
27
        <li><a href="/css/intro">CSS</a></li>
28
    </ul>
29
    <button>리스트 아이템 추가</button>
30
    <p id="text"></p>
31
32
</body>
33
​
34
</html>