過去にこんな記事を書きました。
参考：[JavaScript][jQuery]onload後に構築した要素に対してイベントや関数が効かないときには
参考：[jQuery][JavaScript]jQuery.live()でhoverを実現したい場合は
で、live()すげー！と思ってたのですが、この度↓の記事を読みまして。
参考：The Difference Between jQuery’s .bind(), .live(), and .delegate() - Alfa Jango Blog
結論
以下に書いてるのは、画像のロールオーバーのスクリプトです。
AjaxでDOM構築後に追加した要素に対しても効きます。
// delegate() ver. jQuery(document).delegate('img.hover', 'mouseenter', function(){ jQuery(this).attr('src').replace(/^(.+)_off(\..+)$/, '$1_on$2'); }); jQuery(document).delegate('img.hover', 'mouseleave', function(){ jQuery(this).attr('src').replace(/^(.+)_on(\..+)$/, '$1_off$2'); }); // live() ver. /* jQuery('img.hover').live({ mouseenter: function(){ jQuery(this).attr('src').replace(/^(.+)_off(\..+)$/, '$1_on$2'); }, mouseleave: function(){ jQuery(this).attr('src').replace(/^(.+)_on(\..+)$/, '$1_off$2'); } }); */
そのわけ
いわゆるイベントリスナの考え方だそうです。
詳しい説明は、冒頭の記事を読んでいただくとして・・。
- ホバーやったりクリックやったりの要素を監視する対象は、減らせるなら減らそう。
- イベントを発生させるのは、目的の要素に目的の動きがあった時だけにしよう。
上の例でのlive()だと、「hoverクラスを持つimg要素にマウスが乗っかる・離れる」を、ずーっと見張ってないといけません。
いつどこに要素があるかわからん恐怖！
反対にdelegate()だと、「最初のセレクタである程度範囲を絞る」ことができ、かつ「hoverクラスを持つimg要素にマウスが乗っかる・離れる」だけ見てれば良いと。
いやー、奥が深いわー。