【jQuery】.load()を使用して共通HTMLを読み込む方法

【jQuery】loadメソッドについて

.load()はHTMLを読み込んで指定したセレクタ内に出力することができるメソッドです。
※指定したセレクタ内のHTMLは、読み込んだコンテンツに置き換えられるので注意。

【jQuery】loadメソッドの使い方

$(...).load('URL セレクタ指定可能', パラメータ, コールバック);

URL セレクタ
読み込むHTMLのURLを指定します。
URLの後に空白を開けてセレクタ指定することが可能。

パラメータ
オプションで省略化。
省略した場合はGETメソッドが使用されます。
オブジェクトで指定したとき、POSTメソッドが使用されます。

コールバック
取得するデータがロードされた後に呼び出される関数です。
以下の3つの引数が渡されます。
・response
読み込んだHTML
・status
読み込み成功(success)、読み込み失敗(error)
その他(parsererror,abort,notmodified,timeout,nocontent,canceled)
・xhr
レスポンスデータ

サンプルデモ

以下のHTMLに共通ヘッダーを記載した、template.htmlを読み込ませています。
スマホ画面ではハンバーガーメニューが表示されるようにしています。

index.html
link01/index.html
link02/index.html
link03/index.html

DEMO

サンプルコード

index.html (読み込むHTML)

<body>
    <!-- contents start -->
    <div class="container">

        <!-- header_include -->
        <header id="template-header">
        この中にheaderが読み込まれます。
        </header>
        <!-- header_include -->

        <section class="section_mb section_mt">
            <div class="inner">
                <h2>デモ | 【jQuery】.load()を使用して共通HTMLを読み込む方法</h2>
            </div>
        </section>
    </div>
    <!-- contents end -->
</body>

template.html (読み込まれるHTML)

<header>
    <div class="inner">
        <div class="logo"><a href="/demo/jquery-load/">LOGO</a></div>
        <nav>
            <ul>
                <li><a href="/demo/jquery-load/link01/">リンク01</a></li>
                <li><a href="/demo/jquery-load/link02/">リンク02</a></li>
                <li><a href="/demo/jquery-load/link03/">リンク03</a></li>
            </ul>
        </nav>
    </div>
    <div id="js-toggle" class="header_toggle sp-only">
        <div class="toggle_inner">
            <span class="toggle_line"></span>
            <span class="toggle_line"></span>
            <span class="toggle_line"></span>
        </div>
    </div>
    <div id="js-header-overray" class="header_overray"></div>
</header>

Javascript

$("#template-header").load("/demo/jquery-load/include/template.html header", function (response, status, xhr) {
        header_init();
    });

読み込んだHTMLにjQueryを使う時

読み込んだHTMLに対して、クリックイベント等のjQueryを書いても何も反応しません。
load()で読み込まれるHTMLを読み込む前に、イベントが書かれたJSが読み込まれているからです。
その為、先述のコールバックを使用します。

今回のデモでは、header_init();にヘッダーメニュー関連のJSを記載して
.load()のコールバック関数に指定しています。