Uncaught ReferenceError: $ is not defined rails答案

【问题标题】：Uncaught ReferenceError: $ is not defined railsUncaught ReferenceError: $ is not defined rails
【发布时间】：2015-03-29 08:13:36
【问题描述】：

我正在尝试将 Froala 编辑器添加到我的项目中。

仅在生产服务器上存在问题（在本地主机上工作正常）我正在使用导轨 4.1.0 在 gemfile 我有

gem 'jquery-rails'

在我的资产/javascripts/application.js 中：

//= require jquery
//= require jquery_ujs
//= require foundation
//= require turbolinks
//= require_tree .
//= require modernizr
//= require froala_editor.min.js

在 new.html.erb 文件中：

<div class="row">
  <%= form_for :article do |f| %>
    <p>
        Title<br>
        <%= f.text_field :title %>
    </p>
    <p>
        Content<br>
    <%= f.text_area :text, :id=>'content' %>
    <p>
    <%= f.submit %>
    </p>
  <% end %>
</div>
<script>
  $(function() {
    $('div#content').editable({
      inlineMode: false
    })
  });
</script>

在 application.html.erb 中：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title><%= content_for?(:title) ? yield(:title) : "foundation-rails" %></title>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_include_tag "vendor/modernizr" %>
    <%= javascript_include_tag "application" 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
  </head>
  <body>
    <%= yield %>
  </body>
</html>

在这种情况下，结果是：

Uncaught ReferenceError: $ is not defined

如果我要添加一个字符串：

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

结果是：

Uncaught TypeError: undefined is not a function

【问题讨论】：

请查看页面源代码并确保jquery.min.js被添加到顶部

标签： jquery ruby-on-rails froala

【解决方案1】：

以下是我需要为 Rails 6 做的事情（确切地说是 6.0.3.4。） [发现于（所有功劳归于）：https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker]

将 jQuery 添加到环境中。 $ yarn add jquery

在 environment.js (/config/webpack/environment.js) 中添加以下代码

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

在 application.js 文件中需要 jquery。 (/app/javascript/packs/application.js) require('jquery')
（重新启动 rails 服务器以确保所有内容都已加载。）

【讨论】：

【解决方案2】：

这是我的解决方案：

把它放在你的 app/assets/javascripts/application.js 中

//= require jquery
//= require jquery_ujs

并安装此 gem 文件：

gem 'jquery-rails'

【讨论】：

它还在 rails 6 中吗？（我没有 app/assets/javascripts 目录——我应该创建一个吗？

【解决方案3】：

替换application.html.erb

<%= javascript_include_tag "application" 'data-turbolinks-track' => true %>

到

<%= javascript_include_tag "application" %>

【讨论】：

我不明白 turbolinks 是否有这么大的问题，为什么没有人关心或摆脱它？

【解决方案4】：

尝试切换这些行：

<%= javascript_include_tag "vendor/modernizr" %>
<%= javascript_include_tag "application" 'data-turbolinks-track' => true %>

会变成

<%= javascript_include_tag "application" 'data-turbolinks-track' => true %>
<%= javascript_include_tag "vendor/modernizr" %>

【讨论】：

【解决方案5】：

您是如何将基础添加到项目中的？

在app/assets/javascripts/aplication.js

我有同样的错误

$ 没有定义

我通过这种方式重新加载基础 js 解决了：

jQuery(document).ready(function($) {
$(document).foundation();
});

【讨论】：

当我尝试这个方法时，我得到一个错误，指出 jQuery 没有定义

【解决方案6】：

对我有用的解决方案是：

单独的文件

创建 assets/javascripts/jquery_init.js 内容：

//= require jquery
//= require jquery.turbolinks
//= require jquery.cookie
//= require jquery.ui.all
//= require jquery_ujs

aplication.js 之前的调用

<%= javascript_include_tag "jquery_init" %>
<%= javascript_include_tag "application", :async => !Rails.env.development?, "turbolinks-data-track" => true %>

【讨论】：

奇怪，但这对我有用。

【解决方案7】：

这就是我所做的，它对我有用：

用window.onload = function () { };包围你的脚本，这样你的js只会在页面加载时执行：

window.onload = function () {
  $(function() {
    $('div#content').editable({
      inlineMode: false
    })
  });
};

【讨论】：

它对我有用！谢谢。 window.onload 在原生 JS 代码中，所以它应该可以在任何浏览器中运行。