select2-rails gem無法在Rails4上運行

Question

我已經嘗試過select2-rails gem的文檔，但是我的瀏覽器控制台仍然會拋出錯誤。

未捕獲的TypeError：$（...）。select2不是函數

我使用的是rails 4.0.1和select2-rails 3.5.9.3

我的application.js

//= require jquery
//= require select2
//= require jquery.ui.accordion
//= require jquery.ui.menu
//= require jquery.ui.datepicker
//= require common
//= require posts
//= require twitter/bootstrap
//= require owl.carousel
//= require turbolinks
//= require vendor_js
//= require_tree .

$(document).ready(function() {
  $("select#team_select").select2();
});

application.css

*= require select2
*= require_self
*= require jquery.ui.accordion
*= require jquery.ui.menu
*= require jquery.ui.datepicker
*= require common
*= require owl.carousel
*= require lazybox
*= require fancybox
*= require owl.theme
*= require 7531339
*= require_tree .
*= require font-awesome

_form.html.erb

<%= f.select(:team_id, @teams.collect {|p| [p.name, p.id]}, {include_blank: "None"}, {id: "team_select"}) %>

我在這里做錯了什么？ 任何幫助表示贊賞。

Answer 1

問題肯定在application.js中 ：根據他們的Demo App ，需要JS插件的順序如下：

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require select2
//= require select2_locale_pt-BR
//= require_tree .

在您的情況下，您必須在 select2 之前加載turbolinks ，導致：

//= require jquery
//= require turbolinks
//= require select2
//= require jquery.ui.accordion
//= require jquery.ui.menu
//= require jquery.ui.datepicker
//= require common
//= require posts
//= require twitter/bootstrap
//= require owl.carousel
//= require vendor_js
//= require_tree .

Answer 2

我在使用rails 4.1.5和select2-rails 3.5.9.3時從未遇到過這個問題。 但是，在將rails升級到4.2.4之后，我得到了與此問題中描述的完全相同的錯誤：

未捕獲的TypeError：$（...）。select2不是函數

我能夠通過從我的Gemfile中刪除“select2-rails”gem並將其替換為以下內容來解決錯誤：

source 'https://rails-assets.org' do
  gem 'rails-assets-select2', '~> 4.0.0'
end

Answer 3

在使用CoffeeScript和turbolinks的rails 5上，我不得不使用該行：
$(document).on "turbolinks:load", ->在所有內容之前，以便在加載帶有select標簽的所需頁面時執行代碼。

Answer 4

我有同樣的問題，改變JS插件的順序沒有幫助。

我最終刪除了turbolinks，它現在正在工作。 可能不是最好的解決方案，但這是我在搜索幾個小時后獲得的最好的東西。

所以，基本上我從application.js文件中刪除了該行：

//= require turbolinks