logo-sm

お問い合わせは Webフォームから

ブログ

jQueryでHTMLをパーツ化した際に読み込み箇所にJavascriptが効かない件の対処法

2022.08.11

jQueryでHTMLをパーツ化するための関数でloadという関数があります。

headerやfooterなど複数ページに共通でhtmlを入れ込みたい場合にとても便利です。

特にPHPの知識もいらないのもありがたいですよね。

簡単に、パーツ化を説明します。

(jQueryは読み込んでいる前提です)

1、パーツのhtmlを作成する

読み込ませるための共通の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>

2、読み込ませる

読み込ませる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>

 

3、問題点の解決方法

問題は、loadの次に読み込む処理が、header.htmlを読み込む前に動き出しているからだと思われる。

コールバック関数(処理後に実行してくれる関数)で読み込むと解決した。loadはコールバック関数の入れ込みが引数にとれる。

<header id="header"></header>
<script>
    $('#header').load('header.html',function(){
       $('nav').hide();
    });
</script>

こちらでheader.htmlを読み込んだ後に、赤字箇所が実行され、問題点が解決しました。

関連記事

  • VSCode (内のPowerShell)でアドレス設定を切り替え!
    【経緯】 最近携わった案件で大量のNW機器のキッティングをした際、それぞれにSSHでの接続性などを確認するテス […]

    2023.10.13

  • PaloaltoでWindows NTPサーバに同期
    【事象と対処法】 オフライン環境のPaloaltoでNTPの機能確認をする必要があり、Windows標準のNT […]

    2023.10.13

  • Cisco Packet Tracerを使ってネットワークを学習しよう! -2-
    Packet Tracer紹介の2回目です。今回は、CCNA試験範囲の中で、多くの方にとって理解しにくい技術の […]

    2023.03.28

  • パートナー

  • 人材育成・採用情報