jQueryで要素を追加した時の挙動と反応と対処
よく忘れちゃうから、備忘録に書いておく。
jQueryでボタン等、要素を追加した時に追加したボタンにも同じfuncitonを適応したい場合の書き方。
※ $(document).ready();は最初に読み込まれた時、その場にある要素にしか対応していない。
例えば、btnと言うclass名のボタンを押したら同じclass名のボタンが押せば押すほど増えるしかし、最初に読み込まれた最初のclass名btnのみしかclickアクションは反応しない。
例を書く
$(document).ready(function(e){
$('.btn').on('click', function(){
//btnを押された時の処理(押せば押すほど「追加ボタン」が増えていく)
$('#btn_area').append('');
});
});
こういったコードだと、最初に表示されたclass名btnにしか反応しない。
「追加ボタン」もclass名はbtnだが、このfunctionは反応しない。
じゃぁ、よく忘れるこの場合の対処法。
$(document).ready(function(e){
//↓この行だけ変わってるよ！
$('#btn_area').on('click', '.btn', function(){
//btnを押された時の処理(押せば押すほど「追加ボタン」が増えていく)
$('#btn_area').append('');
});
});
$('#btn_area').on('click', '.btn', function(){});
これは、簡単に書くと$('#btn_area')の子要素(.btn)を指定して反応させるってこと。
見てる限りの処理としては、$('#btn_area')内が押された時に、この親要素の中にある子要素をもう一度見見直すんでしょう。
んで、selectorとして指定してる(.btn)を見ると増えてるから、こいつらも同じ処理をさせるって感じでしょうな。
この書き方よく使うのに、よく忘れるんですよね〜