jQueryで外部ファイル(list.php)をloadで読み込んでいます。

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>

回答の条件
  • 1人3回まで
  • 登録:2009/10/10 06:06:48
  • 終了:2009/10/12 14:06:44

回答(3件)

id:envy8791 No.1

envy8791回答回数13ベストアンサー獲得回数02009/10/10 11:53:36

結論から言うと、できません。


PHPは、コンテンツがクライアントPCに送信される前に、サーバ側で処理するものです。

JavaScript(jQueryを含む)は、コンテンツがクライアントに送信された後に、クライアント側で処理するものです。

クライアント側に送られてしまった後にPHPを処理することはできないのです。

id:kt26

う~ん、理屈はわかるのですが、他のサイト見ると同様の処理しているところがありますからね。ブログサイトとか。

thickboxが駄目なのか、或いは本当にloadでPHPを読み込む形だと駄目なのかわかりませんが、もう少し明確なソースが欲しいところです。

2009/10/10 17:57:26
id:GoldenDawn No.2

GoldenDawn回答回数426ベストアンサー獲得回数812009/10/11 15:33:14

ThickBox はページを読み込んだ時点で一度適用されますが、

あとから追加した要素には自分で適用してやる必要があります。

次のようにしてみてはどうでしょうか。

function listLoad(){
  $("#myList").load("list.php") ;
  tb_init('a.thickbox') ; // 追加する
}

jQuery はあまりよく知らないのでもっとスマートな方法があるかもしれませんが。

id:kt26

「追加する」の部分を追加しましたが、特に変化ありませんでした。

2009/10/11 21:17:20
id:GoldenDawn No.3

GoldenDawn回答回数426ベストアンサー獲得回数812009/10/11 22:38:22

ポイント80pt

失礼しました。

非同期なので読み込みが終了したときに初期化されるようにする必要がありました。

これでどうでしょうか。

function listLoad() {
  $("#myList").ajaxComplete(function(){tb_init('a.thickbox')}) ;
  $("#myList").load("list.php") ;
}
id:kt26

いけましたが、、少し動作が変です。

1:class="thickbox"を書いているリンクをクリック

2:thickboxが表示される

3:thickboxを閉じる

4:再度クリック

5:thickboxが縦に2つ表示される。


と言うように、表示バグが出てきてしまいます。


[追記]

上記はページをthickboxに反映させようとしたら起こる現象です。

画像リンクの場合は、バグになりません。

また、ページの場合は、ファイル名にTB_iframe=trueを付ければ表示バグにならないようです。


と言うわけで、対処法がわかりましたので、質問を終了します。ありがとうございました。

2009/10/12 14:05:28

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません