【html】共通パーツを別ファイル化してjQueryで読み出し+パーツにjsを効かせる方法

#はじめに
###htmlでヘッダーやフッターを共通パーツ化する方法
こうしたことは最近ではVue.jsなどでラクに実現できてしまいますが、今回はプログラマじゃなくても保守できるように。。ということが推奨されたため、できるだけ簡素な方法で実装しました。
そして、**ヘッダー部分で必要なjsが何故か読み込めず**相当ハマってしまったのでその解決法もあわせて記述します。

#手順
以下の方の記事が一番わかりやすく実行しやすかったです。
https://qiita.com/sho11hei12-1998/items/e9c81db697fb5d51e2af

切り分けた先の共通パーツでは、`id`をあらためて指定しなくても`index.html`内で指定しておけばいい感じに読み込んでくれるようです。
header内の`menuWrap`部分をクリックすることで、メニュー（`panel`内の部分）を開閉できるようにしたい、というのが主に実現したいことです。
<br />

~~~html:index.html
<!DOCTYPE HTML>
<head>
  <link rel="stylesheet" media="all" href="css/style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>
  <script src="js/script.js"></script>
</head>
<html>
  <body>
    <!-- header.html -->
    <header id="header"></header>
    <div>
      <h1>中身（コンテンツ）</h1>
    </div>
    <!-- footer.html 今回は使いません -->
    <footer id="footer"></footer>
  </body>
</html>
~~~

~~~html:header.html
<!-- header共通ファイル -->
<div id="headerWrap">
    <h1><a href="index.html"><img src="images/logo.png" width="284" height="160" alt="logo"></a></h1>
    <nav id="mainnav">
        <p id="menuWrap">
          <a id="menu"><span id="menuBtn"></span></a>
        </p>
        <div class="panel">
            <ul>
                <li><to><a href="index.html">トップページ"</a></to></li>
                <li><to><a href="about-us.html">ご挨拶</a></to></li>
                <li><to><a href="archives.html">業績</a></to></li>
                <li><to><a href="contact.html">お問い合わせ</a></to></li>
            </ul>
        </div>
    </nav>
</div>
~~~

~~~css:style.css
    .panel {
        width: 100%;
        display: none;
        overflow: hidden;
        position: relative;
        left: 0;
        top: 0;
        z-index: 100;
    }
    #menuBtn {
        display: block;
        position: absolute;
        top: 60%;
        left: 50%;
        width: 18px;
        height: 2px;
        margin: -1px 0 0 -7px;
        background: #000;
        transition: .2s;
    }
    #menuBtn:before, #menuBtn:after {
        display: block;
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 18px;
        height: 2px;
        background: #000;
        transition: .3s;
    }
    a#menu .close {
        background: transparent;
    }
    a#menu .close:before, a#menu .close:after{
        margin-top: 0;
    }
    a#menu .close:before {
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
    }
    a#menu .close:after {
        transform: rotate(-135deg);
        -webkit-transform: rotate(-135deg);
    }
~~~

~~~js:script.js
$(function(){
    // html 共通部分読み込み
    $("#header").load("header.html");
    $("#footer").load("footer.html");

    // 中略

    $('#menuWrap').on('click', function() {
        $(this).next().slideToggle();
        $('#menuBtn').toggleClass('close');
    },
    function() {
        $(this).next().slideToggle();
        $('#menuBtn').removeClass('close');
    });
});
~~~

上記では概ね必要最低限のソースのみ記述していますが、画面右側に開閉できるハンバーガーメニューのついたヘッダーを生成しました。いや、そのつもりでした。


#さて、パーツ切り分けはできたけど
###jsが効かなくなってしまった
ここまで書いたところでメニューの開閉が出来なくなってしまいました。あらやだ！
headerファイルを切り分ける前は正常にscript.jsを読み込み動いており、パーツを切り分けて`$("#header").load("header.html");`を追記した部分も正常に動いてくれるので、js全体を読み込んでいないわけではなさそう。

作業途中でjQueryのバージョンを変えた(1.8.0->1.9.1)こともあり、廃止メソッドのせいかな？と思い色々試してみるも効果なし。
あと何故かブラウザのデバッグにも引っかからず(理由はわかりません)

#解決
https://webdesign-abc.com/tech/easy-edit/
>大元のhtmlで使用しているjsの機能を使いたい場合は、共通パーツ内の最初に、必要なjsファイルを記述する必要があります。

大元のhtmlで読み込んでいるjsはheaderでは読み込んでくれないようです。
cssは何もしなくても正常に読み込んでくれるのでjsもそんなかんじとうっかり思い込んでました……。

###jsを直接記述する
~~~html:header.html
<!DOCTYPE HTML>
<!-- header共通ファイル -->
<script>
    $('#menuWrap').on('click', function() {
        $(this).next().slideToggle();
        $('#menuBtn').toggleClass('close');
    },
    function() {
        $(this).next().slideToggle();
        $('#menuBtn').removeClass('close');
    });
</script>
<div id="headerWrap">
    <h1><a href="index.html"><img src="images/logo.png" width="284" height="160" alt="logo"></a></h1>
    <nav id="mainnav">
        <p id="menuWrap"><a id="menu"><span id="menuBtn"></span></a></p>
        <div class="panel">
            <ul>
                <li><to><a href="index.html"><img src="images/toppage.png" width="130" alt="トップページ"></a></to></li>
                <li><to><a href="about-us.html"><img src="images/introduce.png" width="130" alt="楽団紹介"></a></to></li>
                <li><to><a href="archives.html"><img src="images/archives.png" width="130" alt="過去の演奏会"></a></to></li>
                <li><to><a href="contact.html"><img src="images/inquiry.png" width="130" alt="お問い合わせ"></a></to></li>
            </ul>
        </div>
    </nav>
</div>
~~~

###開閉できた！
見やすくするため画像にグレー背景をつけています
   ![menu_openアートボード 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262145/eecf4ad8-264b-6c35-f5e5-755c73f98cce.png)

#所感
今回のようにファイル切り分けてjs読み込むとか、DOM操作して生み出したパーツにjsを当てるときの特殊なお作法とか、js(およびjQuery)はわりと引っかかりやすいポイントありますね……。
慣れなのかな。