動的に追加された要素にイベントを埋め込む方法を考えます。
動的に追加・・・とは、
アンケートを例にすると、
ある選択肢の回答結果によって質問内容を切り替えるような画面（画面遷移はしない）で、
それぞれの質問にイベントを埋め込みたいときが該当します。
簡単に書くと、
最初に表示されたボタン（要素）ではなく、
追加されたボタン（要素）にもイベントを埋め込みたい
ときに使います。
ボタンを押すイベントは「clickイベント」でハンドリングします。
こんな感じで実装しますよね？
$(function() {
$("input").click(function(){
// ・・・clickイベント発生時の処理・・・
});
});
実はこのイベントは静的な要素にしか反応しません。
つまり、最初に表示されたボタン（要素）にしか反応しないのです。
では、いつものように試してみたいと思います。
『ボタンを押すと、↓の領域にテスト用のボタンが追加されます。』というボタンを押すと、
その言葉通りにボタンが増殖します。
この増えたボタンと、『最初からあったボタン』を押し比べてみてください。
◆イベントの静的ハンドリングの実装例
$(function() {
$("ボタン要素").click(function(eo){
$("要素-ログ出力").append("～ログ出力～");
});
});
・・・いかがでしょうか？
『最初からあったボタン』のみclickイベントが反応しています。
（反応するとログを出力する動きにしています）
この増えたボタンにどうしてもイベントを埋め込みたい！！
・・・という方は、前回のエントリーにも登場した「.on()」を使ってください。
前回のエントリーでは、
１つの要素に複数のイベントが埋め込められますとサラッと触れただけですが、
今回はもう少し深く（でも、サラッと・・・）見てみたいと思います。
★onメソッドの構文
[jQueryオブジェクト].on(イベント, セレクタ, イベント発生時の処理)【引数】
・イベント：イベントの名称を指定します（clickとかdblclickとか）
・セレクタ：[jQueryオブジェクト]から埋め込む対象の要素をさらに絞り込むときに使います（無くてもOK）
・イベント発生時の処理：その名の通りです
注意点としては、
要素に対して動的にイベントを埋め込む必要があるため、
イベント発生ごとにhtml全体をチェックすることになります。
結果、処理負荷が掛かり、レスポンスに影響を及ぼす場合があります。
それでは、先に提示したサンプルを「.on()」に置き換えてみましょう。
◆イベントの動的ハンドリングの実装例
$(function() {
$("body").on("click", "ボタン要素", function(eo){
$("要素-ログ出力").append("～ログ出力～");
});
});
いかがでしょうか？
追加したボタンにもclickイベントが反応するようになりました。
今回は最初の[jQueryオブジェクト]を「bodyタグ」にしましたが、
余計な要素に反応しても困るので、
可能であればもう少し反応する範囲を狭めた方が良いと思います。
それでは、また。
