loadするlist.php内に「<ul><li><a href="sub.html" class="thickbox">click</a></li></ul>」と出力し、
thickboxで別のページを開こうとしました。しかし、thickboxの処理は行われず、sub.htmlがそのまま表示されました。
loadで読み込んだファイル内でthickboxのコードが実行できるようにしたいのですが、
どうしたらいいのでしょうか?
// Javascript
function listLoad(){
$("#myList").load("list.php");
}
// HTML
<div id="myList"></div>
結論から言うと、できません。
PHPは、コンテンツがクライアントPCに送信される前に、サーバ側で処理するものです。
JavaScript(jQueryを含む)は、コンテンツがクライアントに送信された後に、クライアント側で処理するものです。
クライアント側に送られてしまった後にPHPを処理することはできないのです。
ThickBox はページを読み込んだ時点で一度適用されますが、
あとから追加した要素には自分で適用してやる必要があります。
次のようにしてみてはどうでしょうか。
function listLoad(){ $("#myList").load("list.php") ; tb_init('a.thickbox') ; // 追加する }
jQuery はあまりよく知らないのでもっとスマートな方法があるかもしれませんが。
「追加する」の部分を追加しましたが、特に変化ありませんでした。
失礼しました。
非同期なので読み込みが終了したときに初期化されるようにする必要がありました。
これでどうでしょうか。
function listLoad() { $("#myList").ajaxComplete(function(){tb_init('a.thickbox')}) ; $("#myList").load("list.php") ; }
いけましたが、、少し動作が変です。
1:class="thickbox"を書いているリンクをクリック
2:thickboxが表示される
3:thickboxを閉じる
4:再度クリック
5:thickboxが縦に2つ表示される。
と言うように、表示バグが出てきてしまいます。
[追記]
上記はページをthickboxに反映させようとしたら起こる現象です。
画像リンクの場合は、バグになりません。
また、ページの場合は、ファイル名にTB_iframe=trueを付ければ表示バグにならないようです。
と言うわけで、対処法がわかりましたので、質問を終了します。ありがとうございました。
う~ん、理屈はわかるのですが、他のサイト見ると同様の処理しているところがありますからね。ブログサイトとか。
thickboxが駄目なのか、或いは本当にloadでPHPを読み込む形だと駄目なのかわかりませんが、もう少し明確なソースが欲しいところです。