【javaScript・jQuery】動的に追加した要素にイベントを付与する方法
画面を表示した後に、動的に追加した要素にイベントを付与するには一工夫必要です。
[サンプル]
[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>');
}