動的に追加される要素に対してイベントを付与

イベントデリゲーション（Event Delegation）

通常、静的な要素には直接イベントリスナーを設定できるが、動的に生成される要素には適用されない。
そこで、親要素にイベントを設定し、動的な要素にもイベントを適用する。

実装例

samle_html

<div id="hoge">
  <button class="foo">ボタン1</button>
  <button class="foo">ボタン2</button>
</div>
<button id="add">ボタン追加</button>

samle_js

// 個々の要素に直接イベントを付与（動的な要素には適用されない）
$('#hoge .foo').on('click', function(e) {
  alert('ボタンがクリックされました！');
});

// 親要素にイベントを設定（イベントデリゲーション：動的要素にも適用可能）
$('#hoge').on('click', '.foo', function(e) {
  alert('ボタンがクリックされました！');
});

// 動的にボタンを追加する
$('#add').on('click', function() {
  $('#hoge').append('<button class="foo">新しいボタン</button>');
});