Q&A
「まだ回答を求めている」のは良いとして、質問内容が変わっていないのであればアドバイスは得られにくいですし、私の回答は変わりません。
質問編集して具体的に得たいアドバイスの方向性を示してください。
解決したいこと
レスポンシブ対応のHPを作成しました。
ページ数が増えてきましたのでヘッダーとフッターを共通化しようと"load"を用いてインクルードしたところ
ハンバーガーメニュー動作用のscript.jsが作動しなくなってしまいました。
直接記入すると作動します。
インクルードした状態でｊｓが動くようにしたいと思っています。
発生している問題・エラーメッセージ
PCのchromeでデバッグした際には特にエラーは起きていません。
スマホ用メニューも問題なく動きます。
ハンバーガーメニュー動作用のscript.jsはheader部分をhtml本体内に直接記入すると作動します。
・動いているページでもリロードしたりすると動かなくなります。
・どうやらリスト要素が記載しているページ？ではjsが反応しません。スマホでメニューが開けなくなります。
該当のソースコード
html
1jsが動くソースコード<index.html> 2 3<!DOCTYPE html> 4<html lang="ja"> 5<head> 6<meta charset="utf-8"> 7<title>豊橋弓道協会 TOP</title> 8<meta name="viewport" content="width=device-width,initial-scale=1.0"> 9<meta name="keywords" content="hogehoge"> 10<meta name="description" content="hogehoge"> 11<link rel="stylesheet" type="text/css" href="css/style.css"> 12<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> 13<style type="text/css"> 14</style> 15<link rel="icon" href="images/favicon.ico"> 16 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 17<script src="js/jquery.js"></script> 18<script src="js/script.js"></script> 19<script src="js/jquery.smoothscroll.js"></script> 20<script src="js/jquery.scrollshow.js"></script> 21<script src="js/jquery.slideshow.js"></script> 22<script> 23$(function($){ 24 $('html').smoothscroll({easing : 'swing', speed : 1000, margintop : 50, headerfix : $('header'), outersmooth : true}); 25 $('.totop').scrollshow({position : 500}); 26 $('.slide').slideshow({ 27 touch : false, 28 bgImage : false, 29 autoSlide : true, 30 effect : 'fade', 31 repeat : true, 32 easing : 'swing', 33 interval : 5000, 34 duration : 1000, 35 imgHoverStop : false, 36 navHoverStop : false, 37 navImg : false, 38 navImgCustom : false, 39 navImgSuffix : '' 40 }); 41}); 42</script> 43<!--[if lt IE 9]> 44 <script src="js/html5shiv.js"></script> 45 <script src="js/css3-mediaqueries.js"></script> 46<![endif]--> 47</head> 48<body> 49<!-- ヘッダーはここから --> 50 51<header> 52 <div class="inner"> 53 <h1><a href="index.html"><img src="images/logo.png" alt="hoge" width="140" height="30"></a></h1> 54 <div class="spMenuWrap"> 55 <div id="spMenu"><span id="navBtn"><span id="navBtnIcon"></span></span></div> 56 </div> 57 <nav class="gnav"> 58 <ul> 59 <li><a href="index.html">ホーム</a></li> 60 <!--<li><a href="questionnaire.html">menu1</a></li> --> 61 <li class="subnav"><a href="plan.html">plan</a> 62 <ul> 63 <li><a href="plan.html#plan">plana</a></li> 64 <li><a href="allinformation.html">allinfo</a></li> 65 <li><a href="plan.html#mschedule">monthly</a></li> 66 </ul> 67 </li> 68 <li class="subnav"><a href="kyoushitsu.html">beginner</a> 69 <ul> 70 <li><a href="kyoushitsu.html">beginnerへ</a> 71 <li class="subnav"><a href="kyoushitsu.html">class</a> 72 <ul> 73 <li><a href="kyoushitsu.html#zenki">前期</a></li> 74 <li><a href="kyoushitsu.html#hiru">一般</a></li> 75 <li><a href="kyoushitsu.html#kouki">後期</a></li> 76 </ul> 77 <li><a href="file/Registration.pdf" target="_blank" rel="noopener noreferrer">入会届</a> 78 <li><a href="file/Menbership.pdf" target="_blank" rel="noopener noreferrer">会費一覧表</a></li> 79 </ul> 80 81 <li class="subnav"><a href="./access.html">案内</a> 82 <ul> 83 <li><a href="./access.html">地図・料金</a></li> 84 <li><a href="plan.html#wschedule">利用予定</a></li> 85 </ul> 86 </li> 87 88 89 <li><a href="qanda.html">よくある質問</a></li> 90 <li><a href="contact.html" target="_blank" rel="noopener noreferrer">お問い合わせ</a></li> 91 </ul> 92 </nav> 93 </div><!-- /.inner --> 94</header> 95<!-- ヘッダーはここまで --> 96 97<!-- 写真スライドはここから --> 98<div class="slide"> 99 <ul class="slideInner"> 100 <li><img src="images/A.jpg" alt="A"></li> 101 <li><img src="images/B.jpg" alt="B"></li> 102 <li><img src="images/C.jpg" alt="C"></li> 103 <li><img src="images/D.jpg" alt="D"></li> 104 <li><img src="images/E.jpg" alt="E"></li> 105 </ul> 106</div> 107<!-- /.slide --> 108 109<article> 110 111<div id="contents"> 112<section> 113 <!-- お知らせここから--> 114 <h2>INFORMATION<br><span>お知らせ</span></h2> 115 <!-- 特に重要なお知らせはここに表示--> 116 <h3><span class="highblinking"><strong>新型コロナウイルス感染拡大防止対応について</strong></span><br> 117 Aも<strong>令和２年４月１４日（火）～令和２年５月７日（木）</strong>まで閉鎖されます。<br> 118 前期教室の<span class="blinking"><strong>”中止”</strong></span>も決定しております</strong></h3> 119 120<section> 121<div> 122<dl class="information"> 123<!-- お知らせの中身 info.htmlの５つのみ引用のためinfo.htmlに追加のこと・・・--> 124<script> 125$(function() { 126 $.ajax({ 127 url: './allinformation.html', ////読み込むファイルを指定 128 cache: false, //キャッシュを保存するかの指定 129 success: function(html){ 130 //データ取得後に実行する処理 131 $(html).find('#info_block').each(function(){ //読み込みたい部分の指定 ※今回は#info_blockの中身のulから読み込まれる 132 $('#info').html($(this).html()); //読み込んだ外部HTMLを表示する領域を指定 133 return false; 134 }); 135 $('dl dt:gt(5)').remove(); //gt(4)=> 0からカウント、6より大きな7件目以降の dt を削除 136 $('dl dd:gt(5)').remove(); //7件目以降の dd を削除 137 } 138 }); 139}); 140</script> 141<div id="info"></div> 142</dl> 143</div> 144</section> 145 <!-- お知らせの中身--> 146 <div class="btn right"><a href="allinformation.html">お知らせ一覧はこちら</a></div> 147</section><!-- お知らせ＋一覧ここまで--> 148 149 150<section><!-- 教室情報 --> 151 <h2>始めたい方・再開したい方へ<br><span>教室情報</span></h2><br> 152 <div class="threeCol"> 153 <div class="inner"> 154 <a href="kyoushitsu.html#zenki"> 155 <div class="image zoom overlay"><img src="images/kyoshitsu01.jpg" alt=""></div> 156 <div class="text">前期教室</div> 157 </a> 158 159<h4>前期教室のご案内</h4> 160 <p>4月募集開始、5月開講の初心者向け・中学2年生以上対象の教室です。<br>※18:30-20:30開催となります。</p> 161 <div class="btn"><a href="kyoushitsu.html#zenki">詳しく見る</a></div> 162 </div><!-- /.inner --> 163 164</section><!-- 教室情報 --> 165 166</div><!-- /.contents --> 167</article> 168 169<h2><span>シェア・拡散お願いします</span></h2> 170 <ul class="shareList9"> 171 <li class="shareList9__item"><a class="shareList9__link icon-twitter" href="https://twitter.com/intent/tweet?url=http://www.-&text=のホームページです。よろしくお願いいたします。" target="_blank" title="Twitter"><i class="fab fa-twitter"></i></a></li> 172 <li class="shareList9__item"><a class="shareList9__link icon-facebook" href="https://www.facebook.com/sharer.php?src=bm&u=http://www.-&text=ホームページです。よろしくお願いいたします。" target="_blank" title="Facebook"><i class="fab fa-facebook"></i></a></li> 173 <li class="shareList9__item"><a class="shareList9__link icon-line" href="https://social-plugins.line.me/lineit/share?url=http%3a%2f%2fwww%" target="_blank" title=" LINE "><i class="fab fa-line"></i></a></li> 174</ul> 175 176<!-- フッターはここから footer.htmlを変更のこと --> 177<script type="text/javascript"> 178 $(function(){$("#footer").load("./footer.html"); 179 }) 180 </script> 181 182<div id="footer"></div> 183<!-- フッターはここまで --> 184 185<!-- totopのボタン --> 186<div class="totop"><a href="#"><img src="images/totop.png" alt="ページのトップへ戻る"></a></div><!-- /.totop --> 187</body> 188</html>
html
1jsが動かないソースコード<allinfornmation.html> 2<!DOCTYPE html> 3省略 4<script src="js/jquery.scrollshow.js"></script> 5<script> 6$(function($){ 7 $('html').smoothscroll({easing : 'swing', speed : 1000, margintop : 50, headerfix : $('header'), outersmooth : true}); 8 $('.totop').scrollshow({position : 500}); 9 }); 10</script> 11<!--[if lt IE 9]> 12 <script src="js/html5shiv.js"></script> 13 <script src="js/css3-mediaqueries.js"></script> 14<![endif]--> 15</head> 16<body> 17<!-- ヘッダーはここから header.htmlを変更のこと --> 18<script type="text/javascript"> 19 $(function(){ 20 $("#cheader").load("./header.html"); 21 }) 22</script> 23<header> 24<div id="cheader"></div> 25</header> 26<!-- ヘッダーはここまで --> 27 28<div id="contents"> 29<h2>INFORMATION<br><span>お知らせ一覧</span></h2> 30<div id="info_block"> 31<dl class="allinformation"> 32 33 <dt>2019/5/11</dt> 34 <dd> 35 中略 ホームページを新規に公開しました。 36 </dd> 37 </dl><!-- allinformation--> 38</div><!-- info_block --> 39</div><!-- /.contents --> 40 41<!-- フッター以下同様 --> 42<
js
1jsの中身<script.js> 2 3$(function($){ 4 var timer = false; 5 var windowWidth = window.innerWidth || document.documentElement.clientWidth || 0; 6 var nowWidth; 7 8 // 読み込み時処理 9 $(window).on('load', function(){ 10 spMenu(); 11 subNav(); 12 innerLink(); 13 }); 14 15 // リサイズ時処理 16 $(window).on('resize', function(){ 17 if (timer !== false) { 18 clearTimeout(timer); 19 } 20 timer = setTimeout(function() { 21 nowWidth = window.innerWidth || document.documentElement.clientWidth || 0; 22 if ( windowWidth != nowWidth ) { 23 subNav(); 24 windowWidth = window.innerWidth || document.documentElement.clientWidth || 0; 25 } 26 }, 200); 27 }); 28 29 // メニューボタンの表示（ 30 function spMenu() { 31 $('#spMenu').on('click', function(e) { 32 $('.gnav').slideToggle(e); 33 $('#navBtnIcon').toggleClass('close'); 34 $('html, body').toggleClass('lock'); 35 }); 36 } 37 38 // サブメニューの表示 39 function subNav() { 40 if ($('#spMenu').css('display') == 'block') { 41 $('.subnav > a').off().on('click', function(e) { 42 e.preventDefault(); 43 $(this).next('ul').slideToggle(); 44 $(this).parent().toggleClass('active'); 45 }); 46 } else { 47 if('ontouchstart' in document) { 48 $('.subnav > a').off().on('click', function(e) { 49 e.preventDefault(); 50 }); 51 } 52 } 53 } 54 55 // 内部リンク時のメニュー閉じ 56 function innerLink() { 57 if ($('#spMenu').css('display') == 'block') { 58 $('.gnav a[href^="#"]').on('click', function(e) { 59 $('.gnav').slideToggle(e); 60 $('#navBtnIcon').toggleClass('close'); 61 $('html, body').toggleClass('lock'); 62 }); 63 } 64 } 65}); 66
試したこと
$(function(){
$("#header").load("header.html", function() {
$.getScript("./js/script.js", function(){});
});
});
を記載しても動きませんでした・・・
補足情報（FW/ツールのバージョンなど）
PCでは問題なしスマホ、android/ipadで動作不良
ipad（Safali）の方が動かない可能性が高い
回答2件
0
ベストアンサー
外部化するとタイミングにより下記部分が動かないことが予想されます。
スクリプトを遅延読み込みするのではなく先に読み込んだ上で、後からロードした要素にイベントを適用するような組み方に変えてはいかがでしょう。（下記部分を関数化して実行できるようにするとか）
js
1 // 読み込み時処理 2 $(window).on('load', function(){ 3 spMenu(); 4 subNav(); 5 innerLink(); 6 });
投稿2020/04/16 13:14
総合スコア69625
早速のご回答ありがとうございました。
<script.js>の場所を変えてみたら動かないので結局<head>内に記述しました。
動くページがあるのが理解できないのですが・・・
ｊｓは完全初心者ですので、関数化するためにどのようにすればよいか、どこか良いサイトなどありましたら教えてください。
完全初心者なのであれば、Webの情報は「体系立てた情報」で無いことが多いので、入門書から始めるのが良いと思います。
色々試してみて以下の部分のみを別ファイルに入れて
$('#spMenu').on('click', function(e) を $(document).on('click', "#spMenu",function(e)としてみたところメニューボタン表示まではうまくいきました。子メニューまでは開けないのですが・・
要素の指定方法がまずかったのでしょうか？
```js
jsの中身<spmenuscript.js>
// 読み込み時処理
$(window).on('load', function(){
spMenu();
subNav();
innerLink();
alert('読み込み時');
});
// メニューボタンの表示（
function spMenu() {
alert('spmenu時');
$(document).on('click', "#spMenu",function(e) {
$('.gnav').slideToggle(e);
$('#navBtnIcon').toggleClass('close');
$('html, body').toggleClass('lock');
});
}
> 子メニューまでは開けないのですが
コメントにはそこの記述が無いので指定方法がどうかはわかりません。
すみません。サブメニューは変更していません。
一応、$(document).on('click'・・・と{passive: false}追加を試してみたのですがうまくいかないようです
// サブメニューの表示
function subNav() {
if ($('#spMenu').css('display') == 'block') {
$('.subnav > a').off().on('click', function(e) {
e.preventDefault();
$(this).next('ul').slideToggle();
$(this).parent().toggleClass('active');
}, {passive: false}); //, {passive: false}を追加
} else {
if('ontouchstart' in document) {
$('.subnav > a').off().on('click', function(e) {
e.preventDefault();
}, {passive: false});
}
}
}
{passive: false}を何のためにつけたのかはわかりませんが、関係ないと思います。
また、コメントのコードには「$(document).on('click'」は使われていないようです。
全てのコードは下記になります。
iPadのSafariではsubnav は動いているが、サブメニューは開かない。
Android Ipad のchrome では“読み込み時”が表示されないのでそもそも読み込まれていないのかもしれません。
// 読み込み時処理
$(window).on('load', function(){
spMenu();
subNav();
innerLink();
alert('読み込み時');
//$('.container').on('click', function(){});
alert(clickEventType);
});
// メニューボタンの表示
function spMenu() {
// $('#spMenu').on('click', function(e) { <= headerを共通化したら効かなかった・・・
$(document).on('click','#spMenu',function(e) {
$('.gnav').slideToggle(e);
$('#navBtnIcon').toggleClass('close');
$('html, body').toggleClass('lock');
// $(document).on('click','.subnav > a',function(e){$('a').off();})
});
}
//gnav が表示されているときに以下のものを表示
//親要素の子要素を選択 $("親要素 > 子要素")
//検索対象は直下のa要素のみ
// サブメニューの表示
function subNav() {alert('subnav中身1');
if ($('#nav.gnav').css('display') == 'block') {
//$('.subnav > a').off().on('click', function(e) {
$(document).on('click','.subnav',function(e) {
alert('subnav中身2');
$('.subnav > a').off();
// e.preventDefault();
$(this).next('ul').slideToggle();
$(this).parent().toggleClass('active');
//}, {passive: false}); //, {passive: false}を追加
});
} else {
//$('.subnav > a').off().on('click', function(e) {
$(document).on('click','.subnav',function(e) {
alert('subnav中身3');
$('.subnav > a').off();
// e.preventDefault();
//}, {passive: false});
});
}
}
}
// 内部リンク時のメニュー閉じ
function innerLink() {
alert('innerlink時');
if ($('#spMenu').css('display') == 'block') {
alert('innerlink中身');
$('.gnav a[href^="#"]').on('click', function(e) {
$('.gnav').slideToggle(e);
$('#navBtnIcon').toggleClass('close');
$('html, body').toggleClass('lock');
});
}
}
> 読み込まれていないのかも
$(window).on('load', function(){});の中に入れなければ良いです。
「$(document).on('click'」の形に書き直してさえいればロードを待つ必要はありません。
「if ($('#nav.gnav').css('display') == 'block') {」でクリックイベントを付与し分けていますが、クリックイベントの中で「if ($('#nav.gnav').css('display') == 'block') {」をすればよいです。
（クリックイベントの中で判断させないとその要素が無い可能性がある）
ありがとうございました。
色々勘違いもあり、また、if文も何故そのような書き方をしているかわからず手を付けずにいました。
ご指摘により何とか思う動作となりました。
ご回答ありがとうございました。
サーバーサイドの言語を利用し、テンプレートエンジンを導入とは具体的にどのように行えばよいのでしょう？初心者なもので参考となるサイトなどありましたら教えてください。
まずはサーバーサイドの言語の選定と環境構築について学んでください。
余計なお世話かもしれませんが、少しでも道しるべになれば…。
# ホームページから想像するとページ作成は片手間なのかとか勝手に想像…。（業種的にという意味で）
例えば、やっと JavaScript を始めたばかりで他の言語に手を出すのは辛いという場合、JavaScript でサーバーサイドを構築するという手もあります。(Node.js など)
ただ、ホスティングしている会社によっては、環境も限定されてくるかもしれません。一般的なプロバイダーのホームページサービスだとほぼ絶望的かも。
もし、ある程度、自由に環境構築ができるサーバーがあれば、Node.js (JavaScript 実行環境) + Express (Web アプリケーションフレームワーク) + Pug(テンプレートエンジン) というのが、オーソドックスな組み合わせかもしれません。（個人の主観かもしれませんが。）
その他の言語を学べる余裕があるのであれば、Java、PHP、Python、Ruby、.NET など色々な選択肢があります。あとは、ホスティングしてるサーバーの制限によります。
まとまりがありませんが、参考になれば。
コメントありがとうございます。
趣味で運営しているもので本業は全く畑違いでして、サーバーも今回初めて触れました。
お金をかけずやるという条件でサーバーの環境も自由度はほぼありません。今となってはもう少しお金をかけても良かったかなぁと思っています。
時間を作ってほかの言語も学んでみたいなとは思っています
あなたの回答
tips
プレビュー
