新しく追加した要素にアクションさせるには？

Question

お世話になります。

buttonクリックでinput要素を追加させた後に、

**その追加させたinputに対して$('input').on('input',function(){} **

というのはどのように仕掛ければいいのでしょうか？

<div>
<input type="text">
<button type="button">追加</button>
</div>

<script>
// クリックでinput要素を追加
$('button').on('click',function(){
	var add = $(this).closest('div').find('input').prop('outerHTML');
  $(this).closest('div').append(add);
});	
// input入力でアクション
$('input').on('input',function(){
	console.log('Hello!');
});	
</script>

このようなとき、「Hello!」が出るのは最初のinputへの入力だけで、後に追加された２番目３番目のinputに入力しても「Hello!」って出せませんよね…？

何か良い対処法はございますでしょうか？

Answer 1

「動的に追加した要素のイベント」ですね。
「動的」というキーワードを知らないと調べもつかないので厄介ですね・・

既に出ているように色々やり方はありますが、私はdocumentで拾う書き方を良く使います。

• jQueryで動的に追加した要素はクリックイベントが発火しない？いやそんなことはないぞ

Comments

[junoreku]

参考リンクとワード、ありがとうございます。

Answer 2

後から追加した要素にイベントを設置する方法は

$('対象の最小エリアのセレクタ').on('イベント','対象のセレクタ',function(){
  //ここに処理を記述
});

となります。

下記で実装可能です。inputが続いて分かりにくいかもしれませんが。

$('body').on('input','input',function(){
	console.log('Hello!');
});

keydownでもほぼ同様の動作かと思います。

$('body').on('keydown','input',function(){
	console.log('Hello!');
});

もう一つの方法は、対象の要素をcloneでイベントごと複製する方法です。
これが楽かもしれませんね。

	var add = $(this).closest('div').find('input').clone(true);

Comments

[junoreku]

ありがとうございます。ところで「対象の最小エリアのセレクタ」を書くことで出来る。というのは、どういう仕組みなのですか？

[kszk311]

イベントの発生しているエリアが広いため、できるだけ範囲を制限した方が良い、ということです。
下記が分かりやすく説明されています。
https://qiita.com/sansaisoba/items/7099e63c4badb3b51b74