jQueryのloadメソッドなどでインクルードした要素にfaceboxを適用するときは？

コメントで以下のような質問を頂きました。

thickboxなど、（loadなどで）読み込んだ部分に対して指定したjQueryが機能しませんでした。

初めからある方は機能し、読み込んだ部分のみ機能しません。

厳密な話は抜きにして、loadなどで読み込んだ部分は、最初に thickbox などを適用させるときにはまだ存在していないため、これらの要素には thickbox などの機能は適用されないんですね。

そこで、解決方法は色々あると思いますが、一番シンプルかなと思う例を挙げておきます。

例えば、このブログでは、の少し前で、facebox.js を読み込んでおり、その facebox.js の最後で、以下のようにして facebox.js の機能を適用させています（2010/04/25現在）。

jQuery(function($){
 $('a[href$=".jpg"], a[href$=".gif"], a[href$=".png"], a[rel*=facebox]').facebox({opacity:'0.5'});
});

そして、以下の画像は、上段が最初から存在する画像で、下段が load で読み込んだ画像です。上段はクリックすると画像がオーバーレイで表示され、下段はページ遷移してしまうはずです。

【最初から存在する】

【loadメソッドで読み込んだ】

この下段の画像を読み込むソースは次のようになっています。

jQuery(function($){
 $('#load_1').load('/blog/2009/12/30-223739.html p.image');
});

さて、loadメソッドは、通信完了時のコールバック関数を指定することができますので、その関数の中で、もう一度 facebox.js を適用させてあげればOKです。

ソースは、以下のようになります。

jQuery(function($){
 $('#load_2').load('/blog/2009/12/30-223739.html p.image',
 function(){
 $('#load_2').filter('a[href$=".jpg"], a[href$=".gif"], a[href$=".png"], a[rel*=facebox]').facebox({opacity:'0.5'});
 });
});

【通信完了時のコールバックでfacebox.jsを再適用

クリックするとオーバーレイで表示されるはずです。

注意点は、コールバック関数では、loadした要素に絞って facebox.js などを再適用させないと、最初から存在している要素には２重で facebox.js が適用されてしまい、画像が２枚表示されたりしてしまいます。

• .load() - jQuery API

まあよーく考えると、コールバック関数の「通信完了時」ってのがこういう使い方でいいのかちょっと微妙な気もしますが。。。どうなんでしょ。

以上です。