【javaScript・jQuery】動的に追加した要素にイベントを付与する方法

画面を表示した後に、動的に追加した要素にイベントを付与するには一工夫必要です。

[サンプル]


[index.html]

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
    <form action="#" method="POST">
        <!-- 改行をしたくない要素のclassに「cancelEnter」を指定 -->
        <textarea class="cancelEnter" rows="3">1_改行できません。</textarea>
        <div id="addEvent"></div>
        <button type="button" id="addElement" onclick="add()">要素追加</button>
    </form>
    <script src="index.js"></script>
</body>
</html>

[index.js]
$(function () {

    // 元々表示されているテキストエリアへのイベント付与--------------------
    // このイベント付与のみでは、動的に追加した部分には付与されない---------
    $('.cancelEnter')
        // cancelEnterとついたクラスにkeydownイベントを付与
        .on('keydown', function (e) {
            // e.key == 'Enter'でエンターキーが押された場合の条件を設定
            if (e.key == 'Enter') {
                // 何もせずに処理を終える
                return false;
            }
        })
    // ---------------------------------------------------------------

    // 動的に追加した要素へのイベント付与--------------------------------
    // ボタンクリックで要素を追加するので、ボタンクリックイベントに、要素に
    // イベントを付与するイベントを付与する
    $(document).on("click", "#addElement", function () {
        // ボタンクリック時に、イベントを付与する
        $('.cancelEnter').on('keydown', function (e) {
            if (e.key == 'Enter') {
                return false;
            }
        })

    });
    // ---------------------------------------------------------------
});

function add() {
    $('#addEvent').html('<textarea class="cancelEnter" rows="3">2_改行できません。</textarea>');
}

スポンサーリンク