【Rails6】jQueryでハンバーガーメニューが動かなくなる

実現したいこと

jQueryでハンバーガーメニューが正常に動作するようにしたい

前提

・jQueryインストール済み
・Webpack設定済み
・application.js設定済み

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

ポートフォリオ用にRails6でアプリを作成しています。
ヘッダー部分にハンバーガーメニューを実装しようとしたところ、初めは動作するのですが、他ページのリンクに一度推移したあとメニューボタンを押してもメニューが開かず反応しなくなります。

該当のソースコード

application.html.erb
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>ProfileApp</title>
5    <meta name="viewport" content="width=device-width,initial-scale=1">
6    <%= csrf_meta_tags %>
7    <%= csp_meta_tag %>
8
9    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
10    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
11    <script type="text/javascript">
12      $(function(){
13        //hamburger menu click
14        $('#nav_toggle').click(function(){
15          $("#top-head").toggleClass('open');
16          $("nav").slideToggle(500);
17        });
18         //menu link click
19        $('nav a').click(function(){
20          if(window.innerWidth <= 680){
21            $("#top-head").toggleClass('open');
22            $("nav").slideToggle(500);
23          }
24        });
25      });
26    </script>
27  </head>
28
29  <body>
30    <header id="top-head">
31      <div class="inner">
32        <h1><%= link_to “タイトル”, "/", class:"image-top" %></h1>
33        <div id="nav_toggle">
34          <div>
35            <span></span>
36            <span></span>
37            <span></span>
38          </div>
39        </div>
40        <nav>
41          <ul>
42            <% if user_signed_in? %>
43              <li><%= current_user.name %>ログイン中</li>
44              <li><%= link_to "設定", '/users/account' %></li>
45              <li><%= link_to "ログアウト", :destroy_user_session %></li>
46            <% else %> 
47              <li><%= link_to 'ゲストログイン（閲覧用）', users_guest_sign_in_path, method: :post, class: "login" %></li>
48              <li><%= link_to "新規登録", :new_user_registration %></li>
49              <li><%= link_to "ログイン", :new_user_session %></li>
50            <% end %>
51          </ul>
52        </nav>
53      </div>
54    </header>
55    <main>
56      <%= yield %>
57    </main>
58    <footer>
59      <ul class="menu">
60        <li><%= link_to "利用規約", page_path('terms')%> </li>
61        <li><%= link_to "プライバシーポリシー", page_path('privacy_policy') %> </li>
62      </ul>
63      <p class="copyright">フッター</p>
64    </footer>
65  </body>
66</html>

application.js
1import Rails from "@rails/ujs"
2import Turbolinks from "turbolinks"
3import * as ActiveStorage from "@rails/activestorage"
4import "channels"
5require('jquery')
6
7Rails.start()
8Turbolinks.start()
9ActiveStorage.start()

試したこと

こちらを参考に下記をbody要素の最後に追記しましたが改善せず。

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>

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

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

回答1件

ベストアンサー

Rails6 には、標準で Turbolinks というページ遷移高速化ライブラリが同梱されています。
このライブラリが原因と思われます。

README: https://github.com/turbolinks/turbolinks#observing-navigation-events

上記のドキュメントで解説されていますが、「document または window に対してイベントリスナを登録し、イベントを委譲する」というのが公式でオススメされている手法です。
具体的なコードを以下に示します。

diff
1    <script type="text/javascript">
2      $(function(){
3        //hamburger menu click
4-       $('#nav_toggle').click(function(){
5+       $(document).on('click', '#nav_toggle', function(){
6          $("#top-head").toggleClass('open');
7          $("nav").slideToggle(500);
8        });
9
10        //menu link click
11-       $('nav a').click(function(){
12+       $(document).on('click', 'nav a', function(){
13          if(window.innerWidth <= 680){
14            $("#top-head").toggleClass('open');
15            $("nav").slideToggle(500);
16          }
17        });
18      });
19    </script>