サーバー環境で一部作動しないjQueryがある。

前提・実現したいこと

javascriptでフランス語の勉強記録サイトを作っています。
その中でローカル環境で作動し、サーバー環境では作動しないjQueryがあるので困っています。
レンタルサーバーを借りて実行してみると、以下のソースコードでモーダルの設定の部分は反映されますが、アコーディオンの設定は反映されません。ローカル環境であればちゃんとアコーディオンが作動するので、htmlやjavascriptのエラーではないと思いいろいろ試しましたが解決しません。

以下、公開しているサーバーのurlです。
当方初心者ですので、もし見当違いな質問や当たり前のようなことを質問してしまっていれば申し訳ありません。
本当に困っていますので、どなたか心優しい方、力をお貸しください。

http://haniwa0330.stars.ne.jp/

該当のソースコード

javaScript
1$(function () {
2//アコーディオンの設定
3  $('.japanese').on('click', function() {
4    //thisにopenクラスを付与
5    $(this).toggleClass("open");
6    
7    //thisのcontentを展開、開いていれば閉じる
8    $(this).next().slideToggle();
9    
10  });
11
12  //モーダルの設定
13  $('.modal-open').on('click', function () {
14    $('.js-modal').fadeIn();
15    return false;
16  });
17  $('.btn-success').on('click', function () {
18    $('.js-modal').fadeOut();
19    return false;
20  });
21  $('.js-modal-close').on('click', function () {
22    $('.js-modal').fadeOut();
23    return false;
24  });
25});

insertAdjacentHTMLでHTMLを追加するようにしており、japaneseというクラスの下にあるstudyというクラスをアコーディオンで表示させようとしています。

javaScript
1$.ajax({
2  url: 'item.php'
3})
4  .done(function (data) {
5    var cnt = 0;
6    //データの読み込み+表示
7    
8    data.split('\n').forEach(function (record) {
9      cnt++;
10
11      const post_date = record.split('@')[0];
12      const post_french = record.split('@')[1];
13      const post_japanese = record.split('@')[2];
14      const post_detail = record.split('@')[3];
15      const post_vcb1 = record.split('@')[4];
16      const post_mean1 = record.split('@')[5];
17      const post_vcb2 = record.split('@')[6];
18      const post_mean2 = record.split('@')[7];
19      const post_vcb3 = record.split('@')[8];
20      const post_mean3 = record.split('@')[9];
21
22      
23
24      var add_code_1 = `
25        <div class="row row${cnt} downup">
26        <div class="col-9 item item${cnt}">
27        <span class="date">${post_date}<span>
28        <h4 class="french">${post_french}</h4>
29        <h5 class="japanese">${post_japanese}</h5>
30        <div class="study">
31            <h5 class="detail">${post_detail}</h5>
32            
33            <ul class="vcb-box">
34            <p class="vcb-text">*今日の語彙*</p>
35                <li>${post_vcb1}  ...  <span>${post_mean1}</span></li>
36                <li>${post_vcb2}  ...  <span>${post_mean2}</span></li>
37                <li>${post_vcb3}  ...  <span>${post_mean3}</span></li>
38            </ul>
39            
40        </div>
41        </div>
42        </div>
43        `;
44      var add_code_2 = `
45        <div class="row row${cnt} justify-content-end downup">
46            <div class="col-9 item item${cnt}">
47            <span class="date">${post_date}<span>
48            <h4 class="french">${post_french}</h4>
49            <h5 class="japanese">${post_japanese}</h5>
50            <div class="study">
51                <h5 class="detail">${post_detail}</h5>
52                
53                <ul class="vcb-box">
54                <p class="vcb-text">*今日の語彙*</p>
55                    <li>${post_vcb1}  ...  <span>${post_mean1}</span></li>
56                    <li>${post_vcb2}  ...  <span>${post_mean2}</span></li>
57                    <li>${post_vcb3}  ...  <span>${post_mean3}</span></li>
58                </ul>
59                
60            </div>
61            </div>
62        </div>
63        `;
64
65      var textbox = document.getElementById('textbox');
66      if(cnt % 2 == 0){textbox.insertAdjacentHTML('beforeend', add_code_1)}
67      else {textbox.insertAdjacentHTML('beforeend', add_code_2)};
68    });
69  });
70
71

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <!-- Required meta tags -->
6  <meta charset="utf-8">
7  <meta name="viewport" content="width=device-width, initial-scale=1">
8
9  <!-- Bootstrap CSS -->
10  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
11  <link rel="stylesheet" href="neko.css">
12
13  <title>le Petit Prince</title>
14
15  <link rel="preconnect" href="https://fonts.gstatic.com">
16  <link href="https://fonts.googleapis.com/css2?family=Homemade+Apple&display=swap" rel="stylesheet">
17  <link rel="preconnect" href="https://fonts.googleapis.com">
18  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
19  <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap" rel="stylesheet">
20  <link rel="preconnect" href="https://fonts.googleapis.com">
21  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
22  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
23
24  <script src="jquery-3.6.0.min.js"></script>
25</head>
26<body>
27
28...
29
30  <script type="text/javascript" src="inu.js"></script>
31
32...
33
34</body>
35</html>

試したこと

・jQueryをCDNではなく、ダウンロードする形にした。
・jQueryをCDNで使う際、https://を//から始まるようにした。
・toggleClass,toggleSlideがjQuery3.6.0で使われているか確認した。
・jQueryの始め方を、「　$(function() {　」,「　jQuery(function($) { …　」の2通りで試した。
・google chromeのキャッシュを削除した。
・再起動した。
・サーバー環境でパスがちゃんと記述されているか確認した。

補足情報

ローカル環境...MAMP
レンタルサーバー...スターサーバーのスタンダードプラン(おためし無料契約期間)
jQueryのバージョン...3.6.0
アコーディオンのコードを持ってきたサイト...
https://qiita.com/kei_1011/items/514c77698f4136889f6e

*検証ツールでエラーメッセージは表示されていません。

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

回答1件

ベストアンサー

「.japanese」の要素はjavascriptで動的に生成した要素のようなので、$('.japanese').on('click')だと作用しないようです。
作用させるためには以下のように書くと動くと思います。

javascript
1$(document).on('click', '.japanese', function(){
2  〜処理〜
3});

ローカルで動いてる理由は、不明です。。。

投稿2021/07/02 04:28

runnynose

総合スコア508

haniwa0330

2021/07/02 04:58

解答ありがとうございます！大変参考になりました。 jQueryについてですが $(function () { $(document).on('click', '.japanese', function(){ .... と記述しても動作しませんでした。しかし、確かにHTMLが動的に記述されているので動作しないというのは間違いなさそうです。他になにか解決策等あればぜひ教えていただきたいです、！