Rails 6：未捕获的引用错误 - $ 未定义

Question

I'm trying to get a semantic UI button to work using Javascript in Rails 6. However, none of my code is working properly. The code looks like this:

$(document).on('turbolinks:load', function() {
   $('.message .close').on('click', function() {
   $(this).closest('.message').transition('fade');
   })
;
})

The error I'm getting is: Uncaught ReferenceError: $ is not defined.

My application JS file looks like:

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
// Loads all Semantic javascripts
//= require jquery
//= require semantic-ui
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .
// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

Answer 1

Uncaught ReferenceError: $ is not defined

This error references that $ is not declared yet which eventually denotes that jquery is not loaded into the page properly

check whether jquery gem is added in the gemfile or not

Also, try whether using jQuery as identifier instead of $

Answer 2

在您的 html 页面中添加 jquery 支持文件。

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>