【JQuery】click()とon(click)の違い

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両方とも問題なく動作します。