[ JQuery ] 제이쿼리 동적으로 생성된 버튼에 이벤트 달기

JQuery 로 버튼에 이벤트를 달 때 우리는 보통,

$(document).ready(function( ) { ... }) 안에 이벤트 선언을 하던,

$(function() { ... }) 안에 이벤트 선언을 한다.

만약 아래처럼 첫 번째 버튼을 클릭하면 두 번째 버튼을 그려주는 코드가 있다고 가정하자.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
    <title>Document</title>
    <script>
        $(document).ready(function() {
            //첫 번째 버튼 이벤트
            $("#firstButton").on("click", function() {
                var bodyHtml = "<button id='secondButton'>두 번째 버튼</button>";
                $("#mainDiv").append(bodyHtml);
            });
        });
    </script>
</head>
<body>
    <div id="mainDiv">
        <button id="firstButton">첫 번째 버튼</button>
    </div>
</body>
</html>

첫 번째 버튼 ( firstButton ) 을 클릭하면 두 번째 버튼 ( secondButton ) 이 성공적으로 생성될 것이다.

이는 $(document).ready(function( ) { ... }) 안에 첫 번째 버튼의 이벤트를 선언해놨기에,

화면이 열리면서 해당 코드를 읽어 첫 번째 버튼에게 이벤트를 적용시켜주기 때문이다.

자, 그렇다면 이렇게 동적으로 생성 된 두 번째 버튼 ( secondButton ) 을 클릭 이벤트를 달려면 어떻게 해야할까?

아래처럼 하면 되지 않을까? 하고 두 번째 버튼의 이벤트를 선언할 만하다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
    <title>Document</title>
    <script>
        $(document).ready(function() {
            //첫 번째 버튼 이벤트
            $("#firstButton").on("click", function() {
                var bodyHtml = "<button id='secondButton'>두 번째 버튼</button>";
                $("#mainDiv").append(bodyHtml);
            });
            //두 번째 버튼 이벤트
            $("#secondButton").on("click", function() {
                alert("두 번째 버튼을 클릭했습니다.");
            });
        });
    </script>
</head>
<body>
    <div id="mainDiv">
        <button id="firstButton">첫 번째 버튼</button>
    </div>
</body>
</html>

하지만 기대와는 다르게 두 번째 버튼 ( secondButton ) 을 클릭해도 alert message 가 띄워지지 않는다.

이유는 바로 $(document).ready(function() { ... }) 안에서 바로 버튼을 상대로 선언해놨기 때문.

저 함수는 초기화 함수라고 생각하면 된다고 이전 포스팅에서 언급했다.

뭔말인가 하니, 화면에 HTML 로 여러 태그들을 선언해놓으면 해당 파일이 렌더링 될 때

HTML 태그들, 즉 화면들 부터 읽어들여 노출시키고 화면에 모든 태그들이 올라온 후에,

Script 내의 초기화 함수를 읽어들이는 것이다.

그로 인해 첫 번째 버튼 ( firstButton ) 은 이미 태그로써 선언이 되어있기에,

해당 버튼의 이벤트를 감지해내지만 두 번째 버튼 ( secondButton ) 은 생성되기 전이라 읽히지 않는다.

그럼 이렇게 렌더링 후에 동적으로 생성된 엘리먼트에는 어떻게 이벤트를 걸 수 있을까?

아래처럼 하면 동적 생성 엘리먼트에도 이벤트를 적용시킬 수 있다.

$(document).on("click", "#secondButton", function() {
    alert("두 번째 버튼을 클릭했습니다.");
});

이유는 document 내의 버튼에 이벤트를 적용한 것이 아니라 document 자체에 적용을 시켜버렸기 때문.

최종 수정된 코드는 다음과 같다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
    <title>Document</title>
    <script>
        $(document).ready(function() {
            //첫 번째 버튼 이벤트
            $("#firstButton").on("click", function() {
                var bodyHtml = "<button id='secondButton'>두 번째 버튼</button>";
                $("#mainDiv").append(bodyHtml);
            });
            //두 번째 버튼 이벤트
            $(document).on("click", "#secondButton", function() {
                alert("두 번째 버튼을 클릭했습니다.");
            });
        });
    </script>
</head>
<body>
    <div id="mainDiv">
        <button id="firstButton">첫 번째 버튼</button>
    </div>
</body>
</html>

지금까지 동적으로 생성된 버튼에 이벤트 달기 였다.

저작자표시

'Coding Story > JQuery' 카테고리의 다른 글

[ JQuery ] 제이쿼리 함수 ( attr, val, data 등 ) (0)	2020.11.25
[ JQuery ] 제이쿼리 셀렉터 ( Selector ) ID, CLASS로 찾기 (1)	2020.11.06
[ JQuery ] 제이쿼리란 무엇인가? (0)	2020.11.06

'Coding Story > JQuery' 카테고리의 다른 글

티스토리툴바