例えば、ボックスを追加するプログラムがあるとして、追加したボックスにも何かしらのボタンを含ませるとします。
<div class='block'>
<div class='box'>box</div>
</div>
<script>
$(function(){
$(".add").on("click", function(){
$(".block").append("<div class='box'>box<button class='del'>追加</button></div>");
});
$(".del").on("click", function(){
$(this).parent().remove();
})
})
</script>しかし、追加されたボックスのボタンをクリックしても何も反応しませんでした。
jQueryやjavascriptで後で追加したものは、ブラウザ側で意図的に表面に表示させているだけであり、初めにブラウザに表示させた画面のソースには含まれていないため、反応しなかったという事だそう。
後で発生したタグに対してもjQueryのイベントを発生させるためには、タグやID、classを直接指定するだけでなく、ブラウザ全体にあるものという形を含ませると反応するみたいです。
後で発生するものに対してもイベント持たせる場合は、以下のような感じで反応確認がありました。
<script>
$(function(){
$("body").on("click", ".del", function(){
$(this).parent().remove();
})
})
</script>bodyタグの中にあるdelクラスという大きい規模の中という指定をしてあげると良いらしい。