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 中，您有這一行嗎？

應用程序.html.erb

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

並嘗試以這種方式在您的 application.js 中編寫（可能您在 jquery 之前忘記了 equal）

//= require jquery 

Answer 2

在導軌應用中

默認情況下不包含 jQuery。 讓我們將它添加到 Gemfile 中。

gem 'jquery-rails'

jquery-rails gem 包含 jQuery 文件。 安裝 gem

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

試試這個，我所做的是刪除 turbolinks 。 如果這有效，則說明您如何以不正確的順序加載庫存在問題。

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