Ruby on Rails プロジェクトで JavaScript が機能しない

概要

この (やや古い) Ruby on Rails チュートリアルに従おうとしていますが、JavaScript を動作させるのに苦労しています。より具体的には、次の js ファイルがあります。

モーダル.js

$(document).on('turbolinks:load', function() {
    // when a post is clicked, show its full content in a modal window
    $("body").on( "click", ".single-post-card, .single-post-list", function() {
      console.log('test');
      var posted_by = $(this).find('.post-content .posted-by').html();
      var post_heading = $(this).find('.post-content h3').html();
      var post_content = $(this).find('.post-content p').html();
      var interested = $(this).find('.post-content .interested').attr('href');
      $('.modal-header .posted-by').text(posted_by);
      $('.loaded-data h3').text(post_heading);
      $('.loaded-data p').text(post_content);
      $('.loaded-data .interested a').attr('href', interested);
      $('.myModal').modal('show');
    });
  });

これをこの html.erb ファイルに適用する必要があります。

_modal.html.erb

<!-- Modal -->
<div  class="modal myModal" 
      tabindex="-1" 
      role="dialog" 
      aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <span class="posted-by"></span>
        <button type="button" 
                class="close" 
                data-bs-dismiss="modal" 
                aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
        <div class="modal-body">
          <div class="loaded-data">
            <h3></h3>
            <p></p>
            <div class="interested"><a href="">I'm interested</a></div>
          </div><!-- loaded-data -->
        </div><!-- modal-body -->
    </div>
  </div>
</div>

さらに、次の html.erb ファイルもあります。

_post.html.erb

<div class="col-sm-3 single-post-card" id=<%= post_path(post.id) %>>
  <div class="card">
    <div class="card-block">
      <h4 class="post-text">
        <%= truncate(post.title, :length => 60) %>
      </h4>
      <div class="post-content">
        <div class="posted-by">Posted by <%= post.user.name %></div>
        <h3><%= post.title %></h3> 
        <p><%= post.content %></p>
        <%= link_to "I'm interested", post_path(post.id), class: 'interested' %>
      </div>
    </div>
  </div><!-- card -->
</div><!-- col-sm-3 -->

インデックス.html.erb

<%= render 'posts/modal' %>

<div class="container">
  <div class="row">
    <div id="side-menu"  class="col-sm-3">
    </div><!-- side-menu -->

    <div id="main-content" class="col-sm-9">
      <%= render @posts %>
    </div><!-- main-content -->

  </div><!-- row -->
</div><!-- container -->

アプリケーション.html.erb

<!DOCTYPE html>
<html>
  <head>

    <title>Project01</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    

    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>

    
  </head>

  <body>
    <%= render 'layouts/navbar' %>
    <div class="mainPage">
      <%= yield %>
    </div>
    
    
  </body>
</html>

application.js ファイル:

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "controllers"


//= require jquery
//= require bootstrap-sprockets
//= require turbolinks

プロジェクト全体はここで見つけることができます。

アプリ全体のさまざまな場所にjsファイルを含めたり、htmlファイルのタグ内に書き込んだり、stackoverflowで見つかった他の回答を試してみましたが、成功しませんでした。

解決策

application.html.erb ファイルに javascript_include_tag <%= javascript_include_tag “application”, “data-turbo-track”: “reload”%> を含めてみてください。