Ajaxで取得した画像にfancyboxを適用しても動作しない場合の対処法

fancyboxはいわゆるlightbox系のjQueryプラグインです。通常は以下のような感じで使用します。

jQuery(function($){
    $('a.fancybox').fancybox();
});

上記は普通に画像（とそれにたいするa要素）を配置した場合ですが、画像をAjax通信で取得して動的に配置した場合、上記で動作しません。jQueryは通常、最初のページ読み込み時に存在する要素にしかイベントが適用されないからです。

そんなときのために「live」というメソッドが用意されています。

jQuery 1.3より実装。
イベントに対してハンドラを登録します。
登録されたイベントは、現在および将来的にも、セレクタにマッチする全ての要素に適用されます。
カスタムイベントに対してbindすることも可能です。

live(type, fn) – jQuery 日本語リファレンス

軽くググってみても、それで対処するようにあります。クリックしたときに動作すれば良いので、以下のような感じで。

jQuery(function($){
   $('a.fancybox').live('click', function() {
        $(this).fancybox();
    });
});

そして、試してみると…ならない！普通に画像にリンクしてしまう！
しかも、なぜか一度クリックして画像を表示した要素は、2度目以降fancyboxが動作する！なぜ！

対処法

いろいろ調べたけど、動作仕様がよくわからなかったので、下記の方法で対処。
クリック時ではなく、ホバーした段階でイベントを割り当てるようにしました。

jQuery(function($){
   $('a.fancybox').live('hover', function() {
        $(this).fancybox();
    });
});

2013.2.1追記

nikoさんよりコメントいただきました。下記のコードで素直にクリックイベントでfancyboxをバインドできるそうです。詳しくは本記事コメント欄を参照ください。

$('a.fancybox').live('click', function() {
    $.fancybox(this);
});