Jsファイルが読み込まれません、、、。

Question

前提・実現したいこと

Jsでアコーディオンメニューを実装していました。
jsファイルの記述が終わったので、HTMLに読み込ませたら、

Uncaught TypeError: $(...).on is not a function

というエラーが起きて、読み込むことが出来ないばかりか、その前にもJsで実装していた機能も使えなくなりました。

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

Uncaught TypeError: $(...).on is not a function

該当のソースコード

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script src="./js/swiper.js"></script>
    <script src="js/nav-scroll.js"></script>
    <script src="./js/wow.min.js"></script>
    <script src="./js/page-top.js"></script>
    <script src="./js/accordion.js"></script>

    <dl id="acMenu">
        <dt><span class="accodion-left">Q</span>クリックするとどうなりますか？<span class="accodion-right">+</span></dt>
        <dd>アコーディオンでここが開きます。アコーディオンでここが開きます。アコーディオンでここが開きます。アコーディオンでここが開きます。アコーディオンでここが開きます。アコーディオンでここが開きます。アコーディオンでここが開きます。アコーディオンでここが開きます。</dd>
        <dt><span class="accodion-left">Q</span>クリックするとどうなりますか？<span class="accodion-right">+</span></dt>
        <dd>アコーディオンでここが開きます。アコーディオンでここが開きます。アコーディオンでここが開きます。アコーディオンでここが開きます。アコーディオンでここが開きます。アコーディオンでここが開きます。アコーディオンでここが開きます。アコーディオンでここが開きます。</dd>
        <dt><span class="accodion-left">Q</span>クリックするとどうなりますか？<span class="accodion-right">+</span></dt>
        <dd>アコーディオンでここが開きます。アコーディオンでここが開きます。アコーディオンでここが開きます。アコーディオンでここが開きます。アコーディオンでここが開きます。アコーディオンでここが開きます。アコーディオンでここが開きます。アコーディオンでここが開きます。</dd>
    </dl>

    <script>
        var swiper = new Swiper('.swiper-container', {
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          loop: true,
          pagination: {
                el: '.swiper-pagination',
                clickable: true,
              },
        });
    </script>
　　 <script>
        new WOW().init();
    </script>

$(function(){
    $("#acMenu dt").on("click", function() {
    $(this).next().slideToggle();
    $(this).toggleClass("active");
    });
});

試したこと

変数のスペルミスの確認。
アコーディオンメニューのjsファイルの場所を移動。（jQueryの読み込みの前後を確認したが特に解決しなかった。）
アコーディオンメニューの他のコードを試してみたが変化なし。

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

でjQueryを読み込みしています。

jsのファイルで読み込んだり、HTMLに<script>タグを使って読み込んでいます。

ここにより詳細な情報を記載してください。

Answer 1

.on() は 1.7 で追加されました。それより古いものでは使えません。
https://api.jquery.com/on/

Answer 2

Uncaught TypeError: $(...).on is not a function

jQuery の外部ファイルが読み込まれてないように見えます。

例えばブラウザに Chrome を使っているなら画面を右クリックして出てくるコンテキストメニューからソースを表示し、

心当たりのあるスクリプトをクリックすると、

そのソースが表示されるはずなので、期待通りか調べてみてはいかがですか？

上は Chrome の場合ですが他のメジャーなブラウザにも同様な機能はあります。

Comments

[kajiri_design]

回答ありがとうございます！

この方法知らなかったので、今感激しています。
やってみたところ、
$(function(){
$("#acMenu dt").on("click", function() {
$(this).next().slideToggle();
$(this).toggleClass("active");
});
});
という風に期待通りの動きはしてくれていました。

[退会済みユーザー]

他の回答者の方が指摘されているように jQuery のバージョンをせめて 1.7 以上にしてみてはいかがですか？

[kajiri_design]

解決しました。

本当にありがとうございます！
バージョンが、onのメソッドに対応していなかったみたいです笑

Answer 3

http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
↓↓↓
「https」

それにしても呼んでるjQueryのバージョンが古すぎ、1系の最新1.12.4？

Comments

[kajiri_design]

回答ありがとうございます！

httpsに直しても、特に変化ありませんでした、、。
jQueryってバージョンあるんですね！
あまり詳しくないので、わかりませんでした。

[yambejp]

1.3.2を1.12.4に書き換えてください

[kajiri_design]

返信ありがとうございます。

書き換えましたが、特に変化はありませんでした、、。
バージョンって関係あるんですね。

[yambejp]

いかまるっとコピペして動作確認してください

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
$("#acMenu dt").on("click", function() {
$(this).next().slideToggle();
$(this).toggleClass("active");
});
});
</script>
<style>
dt.active{color:red}
</style>
<dl id="acMenu">
<dt>dt</dt>
<dd>dd</dd>
</dl>

[kajiri_design]

すみません。

jQueryのバージョン変えたら、大丈夫でした！
バージョン変えた時に、jsファイルが上にあって、読み込まれてなかったです。

バージョンによって、できることが変わってくるんですね。
すごい勉強になりました！
本当にありがとうございます！

Answer 4

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<!--SSL/TLSを使用-->

かな？

Comments

[kajiri_design]

回答ありがとうございます！

httpsに直しても、特に変化ありませんでした、、。
sをつけると何か変わるんですか？
すみません。何も知らなくて。。

[kyoya0819]

ページ自体がSSL/TLSで暗号化されている場合、ブラウザによっては自動的にhttp://~からのファイルはブロックしてしまう場合があります。

変えても解決しないということはほかのところに問題があるかもしれません。

[kajiri_design]

返信ありがとうございます。

そういうことがあるんですね！
知りませんでした。
ありがとうございます！！