ここから本文です

JQueryでLoadで読み込んだ後のHTMLに対し、DOM操作ができずに困っています(TT

pas********さん

2010/2/1112:58:00

JQueryでLoadで読み込んだ後のHTMLに対し、DOM操作ができずに困っています(TT

色々調べたのですが、情報が出てこなかったので質問させてください。
JQueryでLoadで読み込んだHTMLに対し、$().widthで幅設定などの操作ができずに困っています(TT

----------------------------------------------------------
$("#loaddiv").load("http://hoge.com/hoge.html"); //ここでLOAD

$("div#base").ready(function() { //hoge.html内の#baseが準備できたら。
baseC = $("div#base"); //hoge.htmlの中の要素。変数へ記憶。(*1)
txtLine = $("div#textline",baseC); //hoge.html内#baseの中の要素

$(baseC).width(300); //#baseを幅300へ変更。
$(txtLine).width(300); //#textlineを幅300へ変更。
}
-----------------------------------------------------------

なぜか(*1)の部分に、FireBugでブレークポイントを設定すると上手くいきます。
おそらく、#baseや#textlineを含んだHTMLファイルを、
Loadで読み込む前に、変数へ代入するからと想像しますが、

Load内の全要素読取終了後イベント(それに近い方法)か、
Loadで読み込んだ後の要素を上手く操作する方法をご存じの方、
この状況を打開する方法をご存じの方、どうか助けてください(TT

閲覧数:
19,637
回答数:
1
お礼:
50枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

sii********さん

2010/2/1213:48:25

load( url, data, callback ) - jQuery 1.3.2 日本語リファレンス
http://semooh.jp/jquery/api/ajax/load/+url%2C+data%2C+callback+/

3番目の引数に通信完了後のコールバック関数を指定することができますから、

--------------------

$("#loaddiv").load("http://hoge.com/hoge.html", null, function() {
baseC = $("div#base"); //hoge.htmlの中の要素。変数へ記憶。(*1)
txtLine = $("div#textline",baseC); //hoge.html内#baseの中の要素

$(baseC).width(300); //#baseを幅300へ変更。
$(txtLine).width(300); //#textlineを幅300へ変更。
}); //ここでLOAD

--------------------

としてみてはいかがでしょうか。違う形で手元でテストしたところ、Firefoxでは指定を反映させられたと思います。

------------

別な方法として、CSSのセレクタで最初から絞り込めるのであれば、おやりになりたいことはスタイルの指定のようなので、最初からCSSに書いておいてもいいと思います。

--------------------

#base { width: 300px; }
#textline { width: 300px; }

--------------------

idは重複しませんので、外部CSSファイルやstyle要素に上記のセレクタを最初から書いてあったとしても、他の要素に適用されることはありません。要素を追加したときに自動的に適用されるはずですので、この方法であればコールバック関数も不要ではないかと思います。

質問した人からのコメント

2010/2/12 20:05:44

回答ありがとうございます。
Load後のコールバックで動作させることに成功しました。

コールバックだと表示が崩れてしまって、上手くいかないと思っていたのですが、
LoadするHTML内で読み込ませていたCSSファイルを、
読み込む側のHTMLへ読み込ませることで解決しました。

sii_sideさんありがとうございました。

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる