人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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>

●質問者: kt26
●カテゴリ:ウェブ制作
✍キーワード:Click HTML JavaScript jQuery PHP
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● envy8791
●0ポイント

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


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

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

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

◎質問者からの返答

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

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


2 ● GoldenDawn
●0ポイント

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

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

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

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

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

◎質問者からの返答

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


3 ● GoldenDawn
●80ポイント

失礼しました。

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

これでどうでしょうか。

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を付ければ表示バグにならないようです。


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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ