jQueryでloadした部分に.jsが効かない

質問

jQueryでloadした部分に.jsが効かない

indexなどのページに、別のhtmlで作ったページをjQueryのloadで読み込んでいますが、
読み込んだ部分に、jQueryや他のjavaスクリプトが適応されないページがあり解消ができません。

問題点としましては、同じjavascript、同じhtmlを読み込んでいるはずなのに、
A.html、B.htmlにおいて動作が違うと言う点です。

具体例としましては、
A、Bは全く同じjQueryとロールオーバー用javascript(smartRollover)、ヘッダhtml、サイドhtml、フッタhtmlを読み込み、
内容部分だけ違うという程度ですが、
A.htmlではページ内全てロールオーバーが可能、
B.htmlでは内容部は可能、load読み込み部は不可能です。

A内容、B内容には量的にかなり差があり、比較でA>>>Bです。
そういった経緯から試しにAの内容を空にしてみると、Aも動かなくなりました。

上の結果から量が多いページだと適応されると判断し、結果としてload読み込みのタイミングでは？
と思っておりますが、自分では解消することができませんでした。

ちなみに使用しているjqueryはjquery-1.4.2.min.jsです。

この場合どのような解消方法、または別の問題点が考えられるのでしょうか？
どなたかに助言を頂きたく思いますので、宜しくお願いいたします。

回答No.1

fujillin · ベストアンサー

処理の順序を考えてみればわかると思いますが、

想像では、ご使用のｊｓはhtml読込み時（ onload )にイベントの設定を行なっているのだと思います。
一方、loadで読込まれるコンテンツは、その時点ではまだ存在していないため、イベントの設定がなさません。
そのために、ご質問のような事象がおきていると推測されます。
（質問文からだけで推測していますので、違う原因かも知れません）

後から要素が追加されても、イベント設定を反映することができるlive関数を用いるようにすればうよろしいかと。
　http://api.jquery.com/live/
　http://semooh.jp/jquery/api/events/live/type%2C+fn/

あるいは、loadで追加したコンテンツには別途で同様の設定するとか…

お礼

live関数によって解決できそうです、まだ不具合はありますが
前進しました。ありがとうございます。

補足

ご回答ありがとうございます。

live関数ですか、先ほど探している間にlive関数のことが何度か出てきたのですが、
関係ないと思い放置しておりましたが、言われてそんな気がしてまいりました。
再度上記サイトでlive関数の事を調べてみます、ありがとうございます。

-----
追記なのですが、何故Aにだけ適用されているか
不具合と言ってしまえばそれまでなのですが、
理由をご教授いただければありがたいです。

回答No.3

yyr446

No.2です。補足見ました。
案の上ですね
smartRollover()を、window のonloadイベントに入れて、
smartRollover()内で、document.getElementsByTagName("img");
でimg要素を収集してますね。

$.load()のコールバック関数で、もう一回smartRollover()を
呼びだせばよいかも。

　.load("url",function(){smartRollover();})

他にもライブラリー使ってたら、同様に、
（とはいかないかも）

お礼

一応解決の見込みはたったのですが、こちらの例も勉強してみようと思いまして、

$(document).ready(function(){
$("#side-bar").load("./index.html #sub-side");
$("#side-bar").load("url",function(){smartRollover();});
});

これで合っていますでしょうか？
記述が正確か心配ですが結果は変わらずでした。

すみません、他の質問含め何度もありがとうございますです。

回答No.2

yyr446

ご質問の意味を取り違えているかも知れませんが。

そもそも、jQueryのloadで、他ページのjavaスクリプトやCSSまで、
動的に取り込んで、反映させられるんでしょうか。
コンテンツだけじゃないでしょうか。

最初の自ページロード完了時に、自ページ内の要素を調べて、初期設定
するような作りのロールオーバーライブラリーだと、後から追加
された要素に関しては、うまくいかないかも知れません。

そおいった意味だと、各javascriptの実行順とタイミングが大きく
影響しますね。

いずれにせよ、情報が不足しているような．．．．
うまくいかないB.htmlのscriptコード載せられませんか？

補足

ご回答ありがとうございます。

うまくいかないスクリプトのコードは
http://www.anchor-gr.jp/labo_opensource_smartrollover.html
スマートロールオーバーというjsです。具体的には簡素で

-----------

function smartRollover() {
if(document.getElementsByTagName) {
var images = document.getElementsByTagName("img");

for(var i=0; i < images.length; i++) {
if(images[i].getAttribute("src").match("_off."))
{
images[i].onmouseover = function() {
this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on."));
}
images[i].onmouseout = function() {
this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off."));
}
}
}
}
}

if(window.addEventListener) {
window.addEventListener("load", smartRollover, false);
}
else if(window.attachEvent) {
window.attachEvent("onload", smartRollover);
}

----

//そもそも、jQueryのloadで、他ページのjavaスクリプトやCSSまで、
動的に取り込んで、反映させられるんでしょうか。
コンテンツだけじゃないでしょうか。
>>Aのほうも全く同じ(メイン内容だけ違う)はずなのに適用されているのが、今回の問題の発生なんです。Aのほうでも無理であればまだ原因がわかりそうなものなんですが。。

//後から追加された要素に関しては、うまくいかないかも知れません。
>>やはりそうですか、、、なんとなくそう思っておりました。ありがとうございます。