The Difference Between jQuery’s .bind(), .live(), and .delegate() - Alfa Jango Blog
http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/
jQueryの.bind(), .live(), .delegate()違いや仕組みの理解、また.delegate()の方が.live()より優れている理由について書かれています。
内容を簡単に書き出すと以下のようなことについて書かれています。
$('a').bind('click', function() { alert("That tickles!") });
.bind()は$(‘a’)に対してイベントを設定してる。
$('a').live('click', function() { alert("That tickles!") });
.live()は$(document)に対してイベントを設定しバブリングで上がってきたtarget要素がCSSセレクタと一致するかを見てイベントを実行してる。
$('a', $('#container')[0]).live(...);
とすることでdocument以外に対してもliveイベントを設定できる。
$('#container').delegate('a', 'click', function() { alert("That tickles!") });
.delegate()は$(‘#container’)に対してバブリングで上がってきたtarget要素がCSSセレクタにマッチするかとイベント(clickなど)が一致する時に実行するイベントを設定してる。 live()に似ているがイコールではない。 以下を見ると違いがわかる
$('a').live('click', function() { blah() });
// 比較
$(document).delegate('a', 'click', function() { blah() });
liveの方は最初に$(‘a’)を実行するため、aリンクを全て探索してしまうため、$(document)を見るだけのdelegate比べて設定するのが遅くなる。 またliveは$(‘a’)に設定してように見えて実際には$(document)に設定していることから$.live(‘a’,…)のようなもっと分かりやすい形であった方がよいと思われること。
またliveで指定したCSSセレクタのみでしか操作ができないため柔軟性に欠けていること(die関係)。
最後になぜ.bind()の代わりに.live() や .delegate()を使うかについて書かれています。
元記事には仕組みなどももっと詳細に書かれているので気になった方はそちらを読むといいでしょう。
追記
他にも下記の記事が参考になると思います。
