#loadしたhtmlにjsを適用させる
##前提：フォルダ階層

階層

┣ static
┃ ┣ css
┃ ┃ ┗ menu.css
┃ ┣ js
┃ ┃ ┣common.js
┃ ┃ ┗menu.js
┃ ┣ html
┃ ┃ ┗ menu.html
┗ templates
  ┗ main.html

##やりたかったこと
###機能
現在いるページと対応するメニューの色を変更させたい。
###コード
htmlで複数ページを作る時に、メニューのところのhtmlが長いのでmenu.htmlとして外部ファイルを作った。
それをcommon.jsで読み込み、main.htmlにmenu.htmlを適用させた。
更に今いるページと対応するメニューの色を変更するために
特定のタグをactiveにする処理を書いたmenu.jsをmenu.htmlに適応させたい。

main.html

<body>
	<div id="menu"></div>

	<!--jQueryの読み込みとか-->
	<script type="text/javascript"
		src="/webjars/jquery/3.3.1/jquery.min.js" charset="utf-8">	
	</script>
	<!--javaScriptの読み込み-->
	<script type="text/javascript" src="/js/common.js"></script>
	<script type="text/javascript" src="/js/menu.js"></script>
</body>

menu.html

<ul id="nav"> 
   <li><a href="/menu1">MENU1</a></li> 
   <li><a href="/menu2">MENU2</a></li> 
   <li><a href="/menu3">MENU3</a></li> 
   <li><a href="/menu4">MENU4</a></li> 
 </ul>

common.js

$(window).on('load', function() {
      //main.htmlのmenu要素についてmenu.htmlを適用させる
	$("#menu").load('/html/menu.html');
});

menu.js

//現在のページのurlとメニューのurlが同じだったら、そこのタグをactiveにする
$(function() {
	$('#nav li a').each(function() {
		var $href = $(this).attr('href');
		if (location.href.match($href)) {
			$(this).addClass('active');
		} else {
			$(this).removeClass('active');
		}
	});
});

menu.css

/*activeになってる要素navの[li a]タグの文字を赤にする*/
#nav li a.active {
	color: red;
}

##問題1
menu.jsはちゃんと読み込まれているっぽいけど、activeにならない。
コンソール上のエラーは発生してないが、なんかうまく適用されていない気がする
##実際にやってみたこと
menu.html上で直接jsを呼んでみる

menu.html

<!--変更したところ↓-->
<script type="text/javascript" src="/js/menu.js"></script>
<!--変更したところ↑-->
<ul id="nav"> 
   <li><a href="/menu1">MENU1</a></li> 
   <li><a href="/menu2">MENU2</a></li> 
   <li><a href="/menu3">MENU3</a></li> 
   <li><a href="/menu4">MENU4</a></li> 
 </ul>

##問題2
とりあえず、jsは読み込まれて適用された。が、
コンソールに以下のエラー

error

[[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

よくわらかないけどエラーが出るってことはダメな気がする。気持ち悪いし
あと、ググったらエンドユーザーに影響がどうのって書いてたらかダメなんだと思う

##解決方法
menu.htmlをロードする時に一緒にjsもロードしてあげる！

common.js

$(window).on('load', function() {
      //main.htmlのmenu要素についてmenu.htmlを適用させる
	$("#menu").load('/html/menu.html');
 	//変更したところ↓
 	$.getScript("/js/menu.js", function() {
	});
 	//変更したところ↑
});

これでエラーなくちゃんとactiveにすることができた

##参考にしたサイト
http://mugen00.moo.jp/web/jquery/getscript-2