以下の方法でheader.htmlを読み込み、モバイル用の共通のメニューを操作したいのですが動きません。
具体的には.menu-triggerをクリックしても#mobile_menu_exist のクラスmobile_menu_hiddenが消えてくれません。

header.htmlの内容を直接index.htmlに書き込むと動くので、.loadの使い方が悪いのか、読み込む順番なのかといろいろ変えたり調べたりしております。

.loadは非推奨になったというような文章も見かけたのですが、
他のやり方、順番などわかる方お教えください。
よろしくお願いいたします。

inc.js

javascript
1$(document).ready(function(){
2
3$(function(){
4  $("#head").load("../header.html");
5  $("#foot").load("../footer.html");
6  $("#sidebar").load("../sidebar.html");
7});
8
9$(function(){
10    $(".menu-trigger").click(function(){
11        $('#mobile_menu_exist').toggleClass('mobile_menu_hidden');
12		$(this).toggleClass('active');
13    });
14});
15
16});

index.html

html
1<!DOCTYPE html>
2<html class="no-js" lang="ja">
3<head>
4<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
5<script type="text/javascript" src="./js/inc.js"></script>
6</head>
7<body>
8<header id="head"></header>
9
10</body>
11</html>

header.html

html
1<nav>
2<ul>
3<li>TOP</li>
4<li>home</li>
5</ul>
6</nav>
7
8 <nav class="mobile_menu">
9    			<div class="hum_btn">
10        			<a class="menu-trigger" href="#">
11                		<span></span>
12                		<span></span>
13                		<span></span>
14            		</a>
15        		</div>
16    	</nav>
17        <section id="mobile_menu_exist" class="mobile_menu_hidden">
18                     <ul>
19<li>TOP</li>
20<li>home</li>                      
21                     </ul>
22         </section>

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

回答4件

「$(document).ready(function()」と「$(function()」を併用する意味はないので
どちらかに寄せてください

javascript
1$(function(){
2  $.ajax("../header.html").done(data=>$("#head").html(data));
3  $.ajax("../footer.html").done(data=>$("#foot").html(data));
4  $.ajax("../sidebar.html").done(data=>$("#sidebar").html(data));
5  $(document).on("click",".menu-trigger",function(){
6      $('#mobile_menu_exist').toggleClass('mobile_menu_hidden');
7      $(this).toggleClass('active');
8  });
9});

IE対応

雑ですみません、古いブラウザで動作させる場合はdoneのコールバックに
無名関数(function(){．．．})を指定してあげてください

javascript
1$.ajax("../header.html").done(function(data){$("#head").html(data)});

投稿2018/10/16 03:42

編集2018/10/17 05:44

yambejp

総合スコア114843

Samson818

2018/10/16 04:55

2行目がシンタックスエラーとなってしまいましたが普通に動きました。ありがとうございます。Consoleで見ても特にエラー等出ていないのですが・・・シンタックスエラーと表示されている環境はDreamWavereCS6上です。

kei344

2018/10/16 12:57

To: ShimpeiFubasamiさん DreamWavereCS6は最近の構文（アロー関数とか）に対応していません。

Samson818

2018/10/17 04:50 編集

IEだと対応していない。などの話はあるでしょうか？ IEで表示されていないのに気付きました。質問してしまいましたが、アロー関数はIEでは動かないとすぐたどり着きました。この方法は駄目なのですね・・・

yambejp

2018/10/17 05:45

IE用のコールバックの書き方書いておきました

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

<nav class="mobile_menu”>のダブルクォートが一つだけ全角になっていますがこれはteratailへのコピペミスですか？？
それか質問者様の開発コードもダブルクォート記述ミスしていませんか？？？

投稿2018/10/16 04:49

退会済みユーザー

総合スコア0

Samson818

2018/10/16 04:57

お気遣いありがとうございます。入力ミスでした。手元のコードでは普通に両方半角でした。

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

.loadの使い方が悪いのか、読み込む順番なのかといろいろ変えたり調べたりしております。
順番などわかる方お教えください。

こちらが参考になると思います。
jQueryの基本 - $(document).ready

投稿2018/10/16 03:56

taka-saan

総合スコア665

ベストアンサー

JavaScript
1    $( 'body' ).on( 'click', '.menu-trigger', function(){
2        $('#mobile_menu_exist').toggleClass('mobile_menu_hidden');
3        $(this).toggleClass('active');
4    });