下層ページのハンバーガーメニューボタンについて

前提・実現したいこと

現在架空サイトを作成しています。
ハンバーガーメニューがtopページしか動作せず、下層ページでは動作しません。
下層ページのハンバーガーメニューは、TOPページのhtml,cssからjqueryで読み込んでいます。
パスが違うかと思い調べましたが、合っています。
おそらくどこかで初歩的なミスをしている気がするのですが、、、しばらく考えて調べてもわかりませんでした。
どなたかご教示いただけますと幸いです。

下記は下層ページのコードを表しています。
コードの共有の仕方に悩み、これで伝わるかどうかわからないのですが、
もし他の情報が必要な場合は教えていただきたいです。

何卒よろしくお願い申し上げます。

発生している問題・エラーメッセージ

        <!-- header -->
        <header></header>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script>
            $(function(){
                $("header").load("../TOP/index.html header");
            });
        </script>
        <!-- header -->
...

    <script src="../JS/script.js"></script>
</body>
</html>

header {
    @import url("../TOP/style.css");
}

(function($) {
    var $nav   = $('.header__navi__inner');
    var $btn   = $('.hamburger');
    var open   = 'open'; // class
    // menu open close
    $btn.on( 'click', function() {
      if ( ! $nav.hasClass( open ) ) {
        $nav.addClass( open );
      } else {
        $nav.removeClass( open );
      }
    });
  } )(jQuery);

該当のソースコード

試したこと![![イメージ説明]

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ファイルの構造はこのようになっております

Lhankor_Mhy

2020/10/22 13:18

「動作しません」とのことですが、具体的には何が起きていますか？結果（実際に起きたこと）を書きましょう https://teratail.com/help/question-tips#questionTips3-4-1

rasan

2020/10/22 13:30

失礼しました。クリックしたら、TOPページではheader__navi__innerにopenクラスが付与されて、ハンバーガーメニューが開くのですが、下層ページでハンバーガーボタンを押しても、メニューが開きません。 Openクラスが付与されてないため、Jqueryが動いていないと思われます。

Lhankor_Mhy

2020/10/22 13:39

パスが間違っているのかもしれません。ディレクトリ構成をご提示いただけますか？

rasan

2020/10/23 12:34

ファイル構造を掲載いたしました。何卒よろしくお願いいたします。

行動規範の内容に同意します

回答1件

おそらく原因は、loadが終わる前にハンバーガーメニューのスクリプトが走っていることだと思います。loadが終わる前であればヘッダが存在しないので、スクリプトが動作していないのではないでしょうか。

loadのコールバックや、Promise（deferred）を使ってみてはいかがですか？

投稿2020/10/23 22:30

Lhankor_Mhy

総合スコア36960

rasan

2020/10/24 00:23

ご回答ありがとうございます。度々の質問で恐縮ですが、確認させていただきたいことがあります。「loadが終わる前にハンバーガーメニューのスクリプトが走っている」とありますが、これはheaderをloadで読み込む前にjqueryが動いてしまっているということでしょうか？クリックイベントで書いているのですが、クリックしていなくても動いてしまっているのでしょうか。