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

2019年7月18日

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

[サンプル]

 

 

[index.html]

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

[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>');
}

スポンサーリンク