ボタンを押したら何かが起きてほしい。

　静的なボタンにアクション追加するときとjQueryで追加したボタンにアクションを追加するときで、書き方違ったので記録する。

静的なボタンの場合

index.html

<dl id="body">
  <button id="hoge">hoge</button>
  <button id="fuga">fuga</button>
  <button id="hoga">hoga</button>
</dl>

button_action.js

$(function () {
    $("#hoge").click(function(e) {
    $(this).text("Hello World!");
  });
});

すると

が

となる。
やっていることは、'hoge'というidにclickイベントを追加しているだけ。
clickされると、function(e)が実施され、

動的なボタンの場合

なぜか静的なボタンのように記述してもうまくいかない。
実は、最近のjQueryではclickは推奨されておらずonを使用すべきということ。
onで書いてみる。（index.htmlに動的に要素追加する方法：jQueryで画面にボタンを付ける - Qiita）

button_action.js

$(function () {
    $("#hoge").on("click",function(e) {
    $(this).text("Hello World!");
  });
});

上記の記述は、onを使用してhogeというidにclickイベントを追加する書き方。
簡単ですね。

でも、実はこれ動きません。
動的なボタンにアクションが追加されない理由は、非推奨なclickを使っているからではないようで、
結局、"hoge"というidはindex.html起動時に存在しないため、探しても見つからないというのが原因のようです。

ということで、以下のように変更

button_action.js

$(function () {
    $(document).on("click", "#hoge",function(e) {
    $(this).text("Hello World");
  });
});

ポイントは、onを呼び出す要素がdocumentになり、onの第二引数に"#hoge"が入っていること。
documentを指定すると、button_action.jsの呼び出し元がすべて対象になる。
そして、onの第二引数に要素を指定すると、 onを呼び出した範囲で特定の要素のみにイベントを追加する ということになる。
つまり、htmlファイル全体を走査し、その中でidがhogeの要素のみにイベントを追加する。という記述となる。

これで、動的なボタンにもイベントが追加出来ました。