メモ書き程度に書いておきます。
ajaxなどで変更したDOMに対するイベントとは。
例えば以下のような時です。
$.ajax({
url: "ex.php",
type: "GET",
data: {
id: 1
},
success: function(data){
$("ul").append("<li>"+data+"</li>");
}
});
jQuery Ajaxの書き方はそれぞれあると思うので、ここでは触れません。
とても適当な例ですが、ex.phpに対してGETメソッドを使い、id=1を送っています。
その結果がsuccessのdataに返ってきます。
そのdataをli要素としてulに追加している。という状態です。
この時に、ulはもともと書かれていますが、li要素はajaxでとってきてから初めてDOMに反映されます。
これをajaxなどで変更したDOMと今回はさせていただきます。
ではこのli要素をクリックしたらalert()で中身を出力したいと思います。
よくある例として
$("li").on("click",function(){
alert($(this).text());
});
onを利用したイベントバインドですね。
ですが、このコードは先ほどのajaxなどで変更したDOMの場合動きません。
***じゃあどうしたらいいんだよ！！！***と。
こうしましょう
$("ul").on("click","li",function(){
alert($(this).text());
});
onはul>liを監視するようになります。
これはulを見に行ってからliを探すので、見つかるというわけですね。
リファレンスにもこのように書かれています。
.on()では選択要素とセレクターがありますが、選択要素は.onメソッドが呼ばれる前にページ上に存在している必要があります。 .on()のような委任タイプのイベントの利点として、もし新しい要素が後からjavaScriptの動的な処理によって選択要素内に追加されたとしても、 セレクタにマッチしていればその新しい要素に対してもイベントハンドラが有効になります。
子要素のイベントを親要素、その親要素とどんどん繋がっていってしまうことがあります。
これをイベントバブリングと言います。
このイベントバブリングを利用した手段というわけですね！
もっと詳しく知りたい方は下のURLから参照してください。