Uncaught ReferenceError: $ is not defined with Ruby on Rails

Question

我是 Rails 上 Ruby 的新手，我正在尝试让 ajax 与 Tutorialspoint 上的 ajax 教程一起工作。 但即使在我将“jquery-rails”gem 包含到 gemfile 中并使用“bundle install”命令后，我的浏览器控制台中仍然出现“未捕获的 ReferenceError：$ 未定义”错误，并且 ajax function 不起作用。 我仍然需要刷新页面才能看到结果。
（我用脚手架生成了代码）

我的 index.view.erb

<h1>Ponies</h1>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Description</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @ponies.each do |pony| %>
      <tr>
        <td><%= pony.name %></td>
        <td><%= pony.description %></td>
        <td><%= link_to 'Show', pony %></td>
        <td><%= link_to 'Edit', edit_pony_path(pony) %></td>
        <td><%= link_to 'Destroy', pony, method: :delete, data: { confirm: 'Are you sure?' }, :remote => true, :class => 'delete_pony' %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'New Pony', new_pony_path %>

我的 destroy.js.erb

$('.delete_pony').bind('ajax:success', function() {
  $(this).closest('tr').fadeOut();
});

我的 ponies_controller.rb

...

def destroy
    @pony.destroy
    respond_to do |format|
      format.html { redirect_to ponies_url, notice: 'Pony was successfully destroyed.' }
      format.json { head :no_content }
      format.js { render :layout => false }
    end
  end

...

宝石文件

...

gem 'jquery-rails'

...

浏览器控制台

Uncaught ReferenceError: $ is not defined
    at <anonymous>:1:1
    at processResponse (rails-ujs.js:283)
    at rails-ujs.js:196
    at XMLHttpRequest.xhr.onreadystatechange (rails-ujs.js:264)

应用程序.js

// 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.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")


// 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)

//= require jquery
//= require jquery_ujs

Answer 1

如果您使用的是 rails 6. 将以下代码添加到您的config/webpack/environment.js文件中。

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jquery: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)

module.exports = environment

更多信息请访问： introduction-jQuery-in-rails-6-using-webpacker

Answer 2

除了更新您的环境文件之外，我做的一件事是快速修复，就是将它添加到 javascript 文件夹中的 application.js 文件中。

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