JavaScriptで動的に増減する要素に対してイベントを発動させる【Vanilla.js】

作成日時：2023年1月30日 15時12分
最終更新日時：2023年1月30日 15時12分
Categories：フロントサイド
Tags： JavaScript jQuery tips

動的に増減する要素に対して、以下のようなやり方ではイベントをセットすることはできない。(クリックして追加されたあと、ボタンをクリックしても追加はされない。)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Hello World test!!</title>
</head>
<body>

    <button class='test'>test</button>

<script>

    const test  = document.getElementsByClassName("test")[0];

    test.addEventListener("click",  () => {
        document.body.innerHTML += "<button class='test'>test</button>";
    }); 
</script>

</body>
</html>

jQueryではこのようにするが

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Hello World test!!</title>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

    <button class='test'>test</button>

<script>
    $(document).on("click", ".test",  () => {
        $("body").append("<button class='test'>test</button>");
    });
</script>

</body>
</html>

Vanilla.jsではこのように書く

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Hello World test!!</title>
</head>
<body>
    <button class='test'>test</button>
<script>

    //動的に増減する要素に対してイベントを発動させる
    document.addEventListener('click', (e) => {

        if (e.target && e.target.classList.contains("test") ) {
                document.body.innerHTML += "<button class='test'>test</button>";
        }
    });
</script>

</body>
</html>

これで動的に追加された要素に対してもイベント処理が発動する。