jQueryで動的に追加した要素にイベントを登録する方法

(1) DOM上に既にある要素に対してイベントを登録するとき

• $(foo).click( …) や
• $(foo).on(“click”, function(){}); 　　 などがあります。
  これらの書き方ではon()の実行時にメモリ上にfooが存在しないとイベントは有効にならないです。 次が本題です。

(2) DOM上にまだない（＝将来的にDOMに追加された要素）に対してイベントを登録するとき

$(hoge).on("click", "fuga", function(){ 
    // something 
});

hogeの要素の子要素のfugaをクリックしたときにイベントが実行
ただし、この書き方の場合、$(hoge)を$(document)にした方が高速になる。
なので次のように書くのが推奨。

$(document).on("click", "fuga", function(){ 
    // something 
});

またDOMへの要素追加時に同時にイベントを登録しておく、次のような書き方でも可能です。

$(hoge).append($("<div />", {
    "id" : "#fuga",
    "on" : {
        "click" : function() {
            // something
        }
    }
}));

次のコードも上のと同じ意味です。

$(hoge).append($("<div />", {
    "id" : "fuga"
}).on("click", function() { 
    // something
}));

以上です。