导致未定义错误的RailsGem设置

Question

下面的设置正在生成ReferenceError: jQuery is not defined和随后的多个TypeError: $ is undefined错误，从而导致脚本不触发。

Gemfile调用

gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'rails-jquery-autocomplete'

，它被翻译成Gemfile.lock

jquery-rails (4.3.5)
  rails-dom-testing (>= 1, < 3)
  railties (>= 4.2.0)
  thor (>= 0.14, < 2.0)
jquery-ui-rails (6.0.1)
  railties (>= 3.2.16)

而application.js是用

// require jquery3
// require jquery-ujs
// require jquery-ui/widgets/autocomplete
// require jquery.Jcrop
//
//= require rails-ujs
//= require autocomplete-rails
//= require activestorage
//= require turbolinks
//= require foundation
//= require rails.validations

因此，这样的元素

<script>
//<![CDATA[

$("input[type=radio]").on("change", function() {  [...]

和

  <script>
    $(document).foundation();
  </script>

不要开火，因为TypeError: $ is undefined的后果。

另一个rails 5.2应用程序是以相同的方式定义的，不会生成这样的错误。这个装置有什么问题(或者我漏掉了什么)？

Answer 1

在你的application.html.erb里，你有这一行吗？

application.html.erb

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

并尝试用这种方式编写application.js (可能在jquery之前忘记了相等)

//= require jquery 

Answer 2

在rails应用中

默认情况下不包括jQuery。让我们将其添加到Gemfile中。

gem 'jquery-rails'

jQuery创业板包含jQuery文件。安装创业板

bundle install

要在我们的应用程序中包含jQuery文件，需要在app/assets/javascripts/application.js上设置几个文件

您需要删除rails-ujs，因为您使用jquery_ujs的目的是相同的。

//= require jquery3
//= require jquery_ujs
//= require_tree .

在你的file.js上

$(document).ready(function() {
  console.log("All working fine");
})

或者在页面上使用file.js之前包括它。

Answer 3

试着用这个，我做的是移除鼻涕。如果这样做有效，那么在如何以不正确的顺序加载库时会出现问题。

// require jquery3
// require jquery-ujs
// require jquery-ui/widgets/autocomplete
// require jquery.Jcrop
//
//= require rails-ujs
//= require autocomplete-rails
//= require activestorage
//= require foundation
//= require rails.validations