2013/03/16
最新の記事更新しました。
** この記事ははっきり言って古いです。参考になりません。
「JQueryでloadを使ったときのイベント処理(on)」を参照してください。**
HTMLのbodyにヘッダーとかフッターとかメニューボタンとかページごとに毎回書くとメンテナンス性が低下するため、JavaScriptだけで読み込ませたいと思い、JQueryのload使いました。
本当はPHPとかサーバサイドでやるのがいいんだろうけど、そういうわけにも行かない大人の事情もあるわけです。
ただ外部から読み込んだファイルに対して、JQueryのhoverとか使ってイベント処理をしようとおもったんですが、どうもうまくいかない。
たとえばindex.htmlがあって、JQueryのloadメソッドつかって、menu.htmlを読み込んでいた場合、よくメニューボタンでonMouseしたらメニューボタンの画像を変えたいとかいうよくあるやつをやりたかったんです。
で、下のように書いてみたんです。
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<head>
<link href="/css/index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/jquery-1.3.2.min.jss"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
$("#menu").load("/include/menu.html"); //menu.htmlの読み込み
$("#menu a").hover(function(){
chengHFMenu($(this),"on","/image/");
},
function(){
chengHFMenu($(this),"off","/image/");
});
});
function chengHFMenu(parnet,mode,path) {
var child = parnet.children();
var filename =path + parnet.attr("rel")
if (mode == "on") {
filename +="_on.png";
}
else {
filename +="_off.png";
}
child.attr("src",filename);
}
//]]>
</script>
<title>ポリドッグ ラボ | HOME</title>
</head>
<body>
<div id="menu">
</div>
<div id="content">
<h1>ポリドッグ ラボ</h1>
</div>
</body>
|
/include/menu.html
1
2
3
|
<a href="/about.html"><img src="/image/about_off.png"></a>
<a href="/link.html"><img src="/image/link_off.png"></a>
|
この場合だとメニューは表示されるけど、hoverイベントが実行されない。
なぜかとかなり悩んだんですが、非常に答えは簡単でした。。
そもそもJQueryの「$(function(){…..」って書き方はreadyイベントの省略系なんですよね。
で、日本語リファレンスみてみると「DOMがロードされて操作・解析が可能になったタイミングで関数を実行します。」ってかいてある。
ってことは、自分の中の予測ですが、indexの「$(function(){…..」なかに「$(“#menu a”).hover」って書いても、そんなものはないってことで実行されないのかもしれない。
なんとなくloadガ終わったあとにDOMが生成されていて出来るきもしますが・・・うまくいかないみたいです。
そもそもloadってAjax的なわけだから、非同期通信して外部ファイルを取得してくるので、readyイベントが発生した段階じゃmenu部分はDOMにないのではないかなぁーとか。
正しい答えはわかりませんが・・・。
とりあえず、menu.htmlにreadyイベント仕込めばいいんじゃないかと思い、試してみました。
/include/menu.html
1
2
3
4
5
6
7
8
9
10
11
12
13
|
//<![CDATA[
$("#menu a").hover(function(){
chengHFMenu($(this),"on","./image/");
},
function(){
chengHFMenu($(this),"off","./image/");
});
//]]>
</script>
<a href="/home.html" rel="home"><img src="./image/home_off.png"></a>
<a href="/about.html" rel="about"><img src="./image/about_off.png"></a>
<a href="/link.html" rel="link"><img src="./image/link_off.png"></a>
|
ちなみにindex.htmlのhoverの部分は削除しました。
思ったとおりこれだとうまくいきます。
ただ、思ったのが、JQuery.ajaxとかでもなんとかなりそうな気もしますが・・・。
あとはloadのコールバックをうまく使えばそれでも行けそうな気はしますね。
まあとりあえず、読む先のファイルにイベント書いておけば大丈夫っぽいですね。