コメントで以下のような質問を頂きました。 thickboxなど、(loadなどで)読み込んだ部分に対して指定したjQueryが機能しませんでした。 初めからある方は機能し、読み込んだ部分のみ機能しません。 厳密な話は抜きにして、loadなどで読み込んだ部分は、最初に thickbox などを適用させるときにはまだ存在していないため、これらの要素には thickbox などの機能は適用されないんです...
コメントで以下のような質問を頂きました。
thickboxなど、(loadなどで)読み込んだ部分に対して指定したjQueryが機能しませんでした。
初めからある方は機能し、読み込んだ部分のみ機能しません。
厳密な話は抜きにして、loadなどで読み込んだ部分は、最初に thickbox などを適用させるときにはまだ存在していないため、これらの要素には thickbox などの機能は適用されないんですね。
そこで、解決方法は色々あると思いますが、一番シンプルかなと思う例を挙げておきます。
例えば、このブログでは、</body>の少し前で、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 などを再適用させないと、最初から存在している要素には2重で facebox.js が適用されてしまい、画像が2枚表示されたりしてしまいます。
まあよーく考えると、コールバック関数の「通信完了時」ってのがこういう使い方でいいのかちょっと微妙な気もしますが。。。どうなんでしょ。
以上です。