【jQuery】動的追加したオブジェクトにイベントを設定

jQueryでオブジェクト(ボタンやリンク)にイベントを設定した場合、
画面表示時点で存在しているオブジェクトを押下すると
設定したイベントがもちろん実行されますが、
動的追加したオブジェクトでは押下しても設定したイベントが
実行されない事象があったので、解決策をメモしておきます。

例
下記のようなHTML(Thymeleaf)があると仮定し、
追加ボタンを押下すると行(<tr>～</tr>)が追加されるとする。

<table class="table">
  <thead>
    <tr>
      <th><span th:text="${no}"></span></th>
      <th><span th:text="${gaiyou}"></span></th>
      <th><span th:text="${naiyou}"></span></th>
      <th><span th:text="${link}"></span></th>
      <th><span th:text="${aruaru}"></span></th>
    </tr>
  </thead>
  <tbody id="van-tbody">
    <tr th:each="van : ${vanAll}" >
      <td><span th:text="${van.no}"></span></td>
      <td><span th:text="${van.gaiyou}"></span></td>
      <td><span th:text="${van.naiyou}"></span></td>
      <td><span th:text="${link}"></span></td>
      <td>
        <span th:text="${van.aruaru}"></span><button id="button-plus + '${van.no}'" type="button" class="btn btn-plus"><span class="glyphicon glyphicon-plus-sign"></span></button>
      </td>
    </tr>
  </tbody>
</table>

オブジェクトのイベント設定(静的)
上記HTMLにおいて初期状態で2行分があるとし、
その2行分のみにイベントを設定する場合、下記のようなイベント設定で問題なし。
- clickメソッド
  古いタイプのイベント設定方法。
  「button」に設定してしまうとテーブル外のボタンにもイベントが設定されてしまうので、
  テーブル内のボタンだけが利用しているスタイルシート「btn-plus」にイベントを設定している。
```
<script type="text/javascript">

</script>
```
- onメソッド
  新しいタイプのイベント設定方法。
  こちらの設定方法が推奨されており、「バインド」と呼ばれる。
  onメソッドの第1引数はスペースで区切れば複数のイベントも設定可能。
  例：’click keyup’
```
<script type="text/javascript">

</script>
```

オブジェクトのイベント設定(動的)
上記HTMLにおいて初期状態で2行分があるとし、
3行目、4行目と増えてもイベントを動作させたい場合、
下記のようにイベント自体は親に設定しておいて、
onメソッドの第2引数に本来イベントを設定したいオブジェクトを指定します。
- onメソッド(第2引数追加版)
  このような設定方法を「デリゲート」という。
```
<script type="text/javascript">

</script>
```