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ベストアンサー
- 回答日時:
処理の順序を考えてみればわかると思いますが、
想像では、ご使用のjsはhtml読込み時( onload )にイベントの設定を行なっているのだと思います。
一方、loadで読込まれるコンテンツは、その時点ではまだ存在していないため、イベントの設定がなさません。
そのために、ご質問のような事象がおきていると推測されます。
(質問文からだけで推測していますので、違う原因かも知れません)
後から要素が追加されても、イベント設定を反映することができるlive関数を用いるようにすればうよろしいかと。
http://api.jquery.com/live/
http://semooh.jp/jquery/api/events/live/type%2C+ …
あるいは、loadで追加したコンテンツには別途で同様の設定するとか…
この回答への補足
ご回答ありがとうございます。
live関数ですか、先ほど探している間にlive関数のことが何度か出てきたのですが、
関係ないと思い放置しておりましたが、言われてそんな気がしてまいりました。
再度上記サイトでlive関数の事を調べてみます、ありがとうございます。
-----
追記なのですが、何故Aにだけ適用されているか
不具合と言ってしまえばそれまでなのですが、
理由をご教授いただければありがたいです。
No.3
- 回答日時:
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
- 回答日時:
ご質問の意味を取り違えているかも知れませんが。
そもそも、jQueryのloadで、他ページのjavaスクリプトやCSSまで、
動的に取り込んで、反映させられるんでしょうか。
コンテンツだけじゃないでしょうか。
最初の自ページロード完了時に、自ページ内の要素を調べて、初期設定
するような作りのロールオーバーライブラリーだと、後から追加
された要素に関しては、うまくいかないかも知れません。
そおいった意味だと、各javascriptの実行順とタイミングが大きく
影響しますね。
いずれにせよ、情報が不足しているような....
うまくいかないB.htmlのscriptコード載せられませんか?
この回答への補足
ご回答ありがとうございます。
うまくいかないスクリプトのコードは
http://www.anchor-gr.jp/labo_opensource_smartrol …
スマートロールオーバーという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のほうでも無理であればまだ原因がわかりそうなものなんですが。。
//後から追加された要素に関しては、うまくいかないかも知れません。
>>やはりそうですか、、、なんとなくそう思っておりました。ありがとうございます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript スマホ上で、左右スワイプで次のページに移動させたいです 2 2022/11/11 17:04
- JavaScript 読み込んだQRコードをフォームに受け渡したい 1 2023/05/18 11:18
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript 階層別の組織図の自動作成について 1 2022/10/26 13:42
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- HTML・CSS Chrome のキャッシュについて 3 2022/05/26 07:50
- JavaScript ローディングアニメーションのロゴがページを読み込んだ後でも消えません 1 2022/09/20 21:50
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画面遷移を行わずに同一ページ...
-
初心者です。gulpでコンパイル...
-
画像の表示位置
-
Google scriptについて 至急scr...
-
出発駅A、到着駅Bを選択すると...
-
Q&Aの掲示板を作成していてヤフ...
-
フォームが空欄の時にフォーム...
-
コードレビューをお願いします。
-
追加ボタンを押した際に ok ボ...
-
sessionStorageを調べています。
-
セレクトボックスを2つ設けて選...
-
EasyUIのSubGrid(jquery)にお...
-
GASに文字列として関数を入れる...
-
コードレビューをお願いします。
-
React hooksが値を返して配列変...
-
セレクトを全て選択されていな...
-
【GAS】WEBアプリでハイパーリ...
-
jsで質問です。 ボタンが二つ存...
-
セレクトボックスで配列を呼び...
-
1度きりではなく、繰り返し、挙...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
インラインフレームを自動更新...
-
jQueryでloadした部分に.jsが効...
-
jQuery toggle() 戻るで開いた...
-
javascriptからのphpクラス...
-
リンク元のURLのパラメータでペ...
-
一定時間ごとに表示内容を切り...
-
jQueryで追加した要素がマウス...
-
フレーム内の要素へのXPATHはど...
-
Folder.selectDialog()について
-
JQueryで動的生成のスライダが...
-
連番タイトル名を基準にリンク...
-
EUC-JPに対応しているjQueryを...
-
AjaxでSJISファイル読み込みす...
-
jQuery loadで要素差し替え
-
親フレームの存在確認
-
XHTMLで外部JSファイルを読み込...
-
HTMLDivElement等の比較、評価...
-
日付が変わると自動更新
-
JavascriptからPHPへのAjax通信...
-
Javascriptを使ってQRコード読...
おすすめ情報