logo-sm

お電話はこちら 03-6912-0139

ブログ

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を読み込んだ後に、赤字箇所が実行され、問題点が解決しました。

関連記事

  • Cisco資格試験の学習法について
    2022年3月にAWS SAA資格取得の記事を書きました。その後、2022年7月にCCNP ENARSI試験を […]

    2022.09.28

  • 【最新版】git hubでサイトを公開する方法
    git hubでサイトが公開できるのでその方法を記述します。 ちょこちょこgit hubをでサイト公開を行う記 […]

    2022.08.11

  • WordPressのSQLでLIKEのワイルドカードがうまく使えない件について
    仕事で、WordpressのSQLを作っていたところ、うまくいかない事象がありました。 WordPressから […]

    2022.08.11

  • パートナー

  • 人材育成