Rails 4 - JavaScript 停止工作，得到：undefined is not a function

Question

我有一个 Rails 应用程序，我在其中使用 gem chosen-rails（或 selected-sass-bootstrap-rails）：在我的 gemfile 中有这个：

gem 'chosen-sass-bootstrap-rails'

它以前可以工作，但现在我经常收到此错误 - 我不知道为什么：

[Error] TypeError: undefined is not a function (evaluating '$('.chosen-  select').chosen({
  allow_single_deselect: true,
  no_results_text: 'No results matched',
  width: '100%'
})')

我的application.js 看起来像这样：

//= require jquery
//= require jquery_ujs
//= require bootstrap

//= require jquery.turbolinks
//= require chosen-jquery
//= require scaffold
//= require jquery.purr
//= require best_in_place
//= require bootstrap-datepicker
//= require jquery-fileupload
//= require autocomplete-rails
//= require jquery-ui
//= require jquery.countdown
//= require autocomplete-rails
//= require bootstrapValidator.min

//= require turbolinks

//= require_tree .

在application.css.scss 我有这行：

*= require chosen_bootstrap

我的 HTML（或 (HAML) 看起来像这样：

= select_tag "tag", options_from_collection_for_select(@team_tags, 'name', 'name', params[:tag]), prompt: "All tags", class: 'form-control chosen-select select-ideas-tag', onchange: "window.location.replace('/teams/#{@team.id}/tags/' + this.value + '?search=#{params[:search]}');"

我的 JS（或 CoffeeScript）看起来像这样：

# enable chosen js
$('.chosen-select').chosen
  allow_single_deselect: true
  no_results_text: 'No results matched'
  width: '100%'

任何想法为什么它不起作用？

更新

似乎不仅 chosen-rails 停止工作，而且似乎 JS 完全停止工作。我的图书馆都没有按预期工作。我曾尝试重建和清理我的资产，但没有帮助。

不确定是什么原因造成的，或者如何找到主要问题。

有什么想法吗？

Answer 1

可能的原因：

包括 jquery 和在应用程序中选择了两次。双重包括其中任何一个都可能导致此错误。

你也可以试试这个，

//= 需要 jquery

//= 需要 jquery.turbolinks

//= 需要 jquery_ujs

//= 需要选择的 jquery

//= 需要脚手架

//= 需要 jquery.purr

//= 需要 jquery-ui

//= 需要引导

//= 需要 jquery.countdown

//= 需要 turbolinks

//= 要求树。

为什么需要 jquery.turbolinks 和 turbolinks。你能禁用涡轮链接并检查吗？

Answer 2

原来我两次都加入了jQuery。一次在application.html 和application.js。删除application.html 中的那个使其工作。

Answer 3

您关于所有 JS 停止工作的建议表明您的初始化代码会导致错误：它会停止对 JS 代码的所有进一步评估。该错误显示“选择的选择”之间存在一些间距（更多表示问题）。破折号和“选择”之间可能有不可打印的字符吗？

我追踪问题的顺序是：

1. 首先检查 JS 是否正常工作，方法是在您的代码之前和之后放置一个警报弹出窗口。但似乎您的代码已到达。
2. 您的初始化代码可能放错了位置：Turbolinks 对初始化代码的位置有一些要求，但在您运行生产版本之前，这可能不是问题。
3. 错误不是很具体地说明问题是哪一部分。甚至可能会评估字符串中的“选择”。通过首先分配绝对错误但在参数哈希中可识别的内容，拆分此命令以确保您不会太快跳转到正确的属性。然后检查 #('chosen-select') 是否甚至有可用的结果（您的视图可能会被破坏）。

请记住，如果此脚本崩溃并且它是第一个初始化代码，则可能不再调用大多数 JS。

我希望这些信息能够为您指明正确的方向......