jQuery：rails中的Uncaught ReferenceError: $ is not defined错误

在本文中，我们将介绍在rails中常见的一个错误：Uncaught ReferenceError: $ is not defined，以及如何解决这个问题。

问题描述

在使用rails开发web应用时，我们经常会使用jQuery来完成一些前端交互。然而，有时候我们会遇到一个常见的错误：Uncaught ReferenceError: $is not defined。这个错误通常发生在我们在页面中的JavaScript代码中使用了$ 符号时。

这个错误的原因是因为在默认情况下，Rails不会加载和使用jQuery库。而 $符号是jQuery的别名，所以当我们使用$ 时，浏览器无法识别它，就会报错。

解决方法

方法一：使用webpacker

Rails 5.1及以上版本引入了webpacker，可以很方便地使用Webpack来管理前端资源。通过webpacker，我们可以轻松使用jQuery及其他前端库。

首先，确保你的应用使用了webpacker。可以在Gemfile中找到以下行：

gem 'webpacker', '~> 4.x'

如果没有这一行，可以使用以下命令来添加webpacker到你的应用：

bundle exec rails webpacker:install

接下来，在你的应用中安装jQuery。可以使用以下命令来安装：

yarn add jquery

然后，打开app/javascript/packs/application.js文件，在文件顶部添加以下代码：

import  $from 'jquery'; window.jQuery =$ ;
window. $=$ ;

这样就将jQuery引入到了你的应用中，并且将$符号定义为window对象的属性。

最后，重新编译你的前端资源。

bundle exec rails webpacker:compile

现在，你的rails应用就可以正常使用jQuery了。

方法二：使用gem包

如果你不想使用webpacker，还可以使用rails的gem包来加载jQuery，使得$符号可用。

首先，打开你的Gemfile文件，在文件底部添加以下行：

gem 'jquery-rails'

然后保存文件，并执行以下命令来安装gem包：

bundle install

接下来，在app/assets/javascripts/application.js或app/javascript/packs/application.js文件中，注释掉下面这行：

//= require rails-ujs

并在文件底部添加以下内容：

//= require jquery
//= require jquery_ujs

保存文件后，$符号就可以正常使用了。

最后，重新启动你的rails应用。

bundle exec rails s

现在，你的rails应用就可以使用jQuery了。

示例

下面是一个使用rails加载jQuery的示例代码：

# Gemfile
gem 'jquery-rails'

# app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs

# app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Rails Error</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_link_tag 'application', 'media': 'all', 'data-turbolinks-track': 'reload' %>
  </head>
  <body>
    <h1>Hello, Rails!</h1>
    <%= yield %>
  </body>
</html>

# app/views/home/index.html.erb
<h2>Using JQuery in Rails</h2>

Click the button to change the text color:

<button id="color-change-btn">Change Color</button>

<script>
   $(document).ready(function() {$ ("#color-change-btn").click(function() {
      $("h1").css("color", "red");
    });
  });
</script>

这个示例中，我们在首页中添加了一个按钮，点击按钮可以修改h1标签的文本颜色为红色。使用$(document).ready()函数确保页面加载完毕后再执行jQuery代码。

总结

通过以上的解决方法，我们可以在rails应用中解决Uncaught ReferenceError: $ is not defined错误。可以选择使用webpacker来管理前端资源，也可以通过gem包来加载jQuery。无论选择哪种方法，都可以让我们的rails应用正常使用jQuery，并避免这个常见的错误。希望本文对你有所帮助！