JQueryを勉強中に気になったので調べた内容を備忘録。
間違っていたらご指摘お願いします。
###onメソッドについて
on()メソッドは、対象となる要素にイベント名や関数を指定することで、イベント処理を実現できます。
対象要素.on(イベント名, セレクタ, データ, 関数)
使えるイベントは様々ありますが、今回はclickイベントを例にまとめます。
例
$('button').on('click', function(){
console.log('on');
});
buttonをclickした時の関数の処理を書いているが、自分が最初学んだときは以下の様なコードだった。
$('button').click(function(){
console.log('ボタン押しました');
});
どちらもclickイベントを実装できる点は同じだが、何が違うのか。
###大きな違いは、Jqueryで途中から追加されたHTML要素を検出できるかどうか。
###click（）の例:
<div>
<button>ボタン１</button>
</div>
<script>
$('button').click(function(){
console.log('ボタン押しました');
});
$('div').append('<button>ボタン２</button>');
</script>
まずボタン１があり、その後appendでボタン２を追加しています。
'button'に対しclickイベントを書いていますが、この場合ボタン１にしか紐づいておらず、後から追加したボタン２には紐づいていません。つまり、ボタン１のclickイベントは動作しますが、ボタン２ではclickイベントは動作しません。
###on(click)の例:
<div>
<button>ボタン１</button>
</div>
<script>
$('div').on('click', 'button', function(){
console.log('ボタン押しました');
});
$('div').append('<button>ボタン２</button>');
</script>
まず、対象を最初から存在している'div'にします。そしてon()の引数にbutton要素を指定します。こうすることで、後から追加されたbutton要素にも紐づくため、button1, button2両方とも問題なく動作します。