ブログ
jQueryでHTMLをパーツ化した際に読み込み箇所にJavascriptが効かない件の対処法
jQueryでHTMLをパーツ化するための関数でloadという関数があります。
headerやfooterなど複数ページに共通でhtmlを入れ込みたい場合にとても便利です。
特にPHPの知識もいらないのもありがたいですよね。
簡単に、パーツ化を説明します。
(jQueryは読み込んでいる前提です)
読み込ませるための共通のhtmlを作ってあげます。
header.html
<h1>タイトル</h1>
<nav>
<ul>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー1</a></li>
<ul>
</nav>
読み込ませるhtmlにload関数で読み込ませる。
分かりやすくするために必要箇所のみ書き込みます。
index.html
<header id="header"></header>
<script>
$('#header').load('header.html');
</script>
こちらでidのheader部分に「header.html」の中身が入り込みます。
load(‘header.html’);の括弧の中は、読み込むファイルのパスを指定してあげてください。
これでパーツの共通化ができます。
ただ、この記述したところ、header.htmlを狙ったjavascriptがあたらない場合があることが判明しました。
例
この場合、赤字箇所の処理が動かない。
<header id="header"></header>
<script>
$('#header').load('header.html');
$('nav').hide();
</script>
問題は、loadの次に読み込む処理が、header.htmlを読み込む前に動き出しているからだと思われる。
コールバック関数（処理後に実行してくれる関数）で読み込むと解決した。loadはコールバック関数の入れ込みが引数にとれる。
<header id="header"></header>
<script>
$('#header').load('header.html',function(){
$('nav').hide();
});
</script>
こちらでheader.htmlを読み込んだ後に、赤字箇所が実行され、問題点が解決しました。
関連記事
2024.04.08
2023.10.13
2023.10.13