rails6にjqueryを反映させたい

実現したいこと
ボタンを押した際に文字を表示させる機能を入れたい

現状
$(function() {
console.log("OK");
});
のようなコンソールに出力を出すのは、うまくいきます。
/global $/
$('.my-button').on('click', () => {
$('.box').toggle();
});
文字に反映させる上記のコードはなぜか反映されません

application.html.erb

<!DOCTYPE html>
<html>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <title>Futuretodo</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    
    <%= stylesheet_link_tag  'application', media: 'all', 'data-turbolinks-track': 'reload' %>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script>
  </head>

  <body>
    <%= render 'layouts/navbar' %>
  <p class="notice"><%= notice %></p>
   <p class="alert"><%= alert %></p>
   
    <%= yield %>
  </body>
</html>

index.html.erb

<% @posttodos.each do |posttodo| %>
  <table>
    <tr>
      <td><%= posttodo.id %></td>
      <td><%= posttodo.todo %></td>
      <td><%= posttodo.timelimit %></td>
      <td><%= posttodo.succesmessage %></td>
      <td><%= posttodo.faildmessage %></td>
  </table>
<% end %>

<p><%= link_to 'ToDoの作成', new_posttodo_path %></p>

<button type="button" class="my-button">表示切り替え</button>
<div class="box">テキスト</div>

application.js

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import "channels"
import "jquery"
window.jQuery = window.$ = require('jquery')

console.log('hello')
/*global $*/
$('.my-button').on('click', () => {
  $('.box').toggle();
});

$(function() {
  console.log("OK");
});



Rails.start()
Turbolinks.start()

ずっと解決されないので解決法でもアドバイスでもなんでもありがたいです。よろしくお願いします

rails6を使っています

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

回答1件

イベント処理も$(関数)の中に書きましょう。<head>内でJavaScriptを読み込んでいるので、そのまま実行するとまだ<body>が構築されておらず、$('.my-button')は空振りになります。
この状況では、Turbolinksを止めることをおすすめします。うまく書けばjQueryとTurbolinksの併用はできなくはないですが、慣れていないとトラブルだらけになります。

投稿2021/11/08 08:08