jqueryのUncaught ReferenceError: jQuery is not definedが解消できない

Question

Uncaught ReferenceError: jQuery is not definedが解消できません。
scriptに deferいれたのですが、即時関数の部分がUncaught ReferenceErrorのままです。
$(document).readyを入れているのですが、他解消ほうのレクチャーいただければ幸いです。

include/head.html
<!--stylesheet-->
<link href="./css/reset.css" rel="stylesheet" type="text/css">
<link href="./css/style.css" rel="stylesheet" type="text/css">
<link href="./css/page.css" rel="stylesheet" type="text/css">
<link href="./css/modaal.css" rel="stylesheet" type="text/css">


<!--javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" defer></script>
<script type="text/javascript" src="./js/pagetop.js" defer></script>
<script type="text/javascript" src="./js/utils.js" defer></script>
<script type="text/javascript" src="./js/viewport.js" defer></script>
<script type="text/javascript" src="./js/tel.js" defer></script>



<!--[if lt IE 9]>
<script type="text/javascript" src="./js/html5shiv.js"></script>
<script src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<script type="text/javascript" src="./js/selectivizr-min.js"></script>
<![endif]-->

<!--ファビコン-->
<link rel="shortcut icon" href="./images/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="./images/favicon.ico">

<!--Google Analytics -->
<?php include_once "googleAnalytics.php"; ?>

index.html

<?php include_once "include/head.html"; ?>

<script type="text/javascript">

jQuery(document).ready(function($) {
  window.onload = function(){ 
  
  var mv = new mainVisual();	
  
  mv.setPanel("images/index/kv01_pc.jpg",5000,"fade",2000,false);
  mv.setPanel("images/index/kv02_pc.jpg",5000,"fade",2000,false);
  mv.setPanel("images/index/kv03_pc.jpg",5000,"fade",2000,false);
  mv.setPanel("images/index/kv04_pc.jpg",5000,"fade",2000,false);
  mv.setPanel("images/index/kv05_pc.jpg",5000,"fade",2000,false);
  mv.addVisual("key_visual",true);
  };
 
});

</script>

//以下コンテンツ

<script>
	$(document).ready(function(){
    $('.notice dt').click(function(){
      $(this).stop().toggleClass('active');
      $(this).next('dd').stop().slideToggle();
    });
	});
</script>	
</body>

jqueryで以下のバージョンを新しくするとUncaught ReferenceErrorとでて動かなくなります。
バージョンに合わせ記述方法などことなるのでしょうか？
https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
↓
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js

Answer 1

jQuery本体の読み込みコードからdeferを外してください（他のライブラリコードも、下の<script>から呼ぶならdeferは不適当です）。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

直接<script>で書いたもののほうが先に実行されてしまうので、jQuery本体が読み込まれないタイミングで実行されることとなりえます。

Comments

[nanashissss]

ありがとうございます。
defer外しましたが、動かないのですが以下CDNのバージョンを変更しました。
バージョンに合わせ記述方法に変更しないと動かなくなりますか？
※1.7.1/jquery.min.jsにしたら解消できたのですが
https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
↓
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js

[maisumakun]

＞ defer外しましたが、動かないのですが以下CDNのバージョンを変更しました。

同じエラーが出続けているのですか？それとも違うエラーになっていませんか？

[nanashissss]

先ほどまでエラーでてたものは消えました。
詳しくないのですが、jqueryのバージョンを上げたのが原因みたいです

古いバージョンで動いていたのが新しいバージョンでは動かなくなる事ってありますでしょうか？

[maisumakun]

ありえます。

[nanashissss]

承知いたしました。
ありがとうございます。

Answer 2

jQuery を defer しているのですから、defer していない<script> では jQuery は使えません。jQuery を使わないように書き換えましょう。

jQuery(document).ready(function($) {
  window.onload = function(){ 

ここは単純に window.onload = function() { でよいでしょう。

	$(document).ready(function(){

これは document.addEventListener('DOMContentLoaded', function() { などにします。引数のコールバック内では jQuery を使うことができます。

---

または、<script>の中身を別URLにして、その<script>も defer しましょう。

Comments

[nanashissss]

ありがとうございます。
jqueryのバージョン上げる用に指示されたらこちらで対処してみます