TypeError：$（…）。selectize不是函数
我在我的rails应用程序中安装了“selectize-rails”gem，我正试图让它工作。 我一直在我的网络控制台中收到此错误：
TypeError: $(...).selectize is not a function 并且浏览器中没有任何反应。 这是我到目前为止的代码，遵循此页面中的“电子邮件联系人”示例： http ： //brianreavis.github.io/selectize.js/
意见/电子邮件/ new.html.erb
$(document).ready(function() { console.log( typeof $.fn.selectize === 'function'); // true console.log( $('#select-to').length === 1 ); // true var REGEX_EMAIL = '([a-z0-9!#$%&\'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&\'*+/=?^_`{|}~-]+)*@' + '(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)'; $('#select-to').selectize({ persist: false, maxItems: null, valueField: 'email', labelField: 'name', searchField: ['name', 'email'], options: [ {email: 'brian@thirdroute.com', name: 'Brian Reavis'}, {email: 'nikola@tesla.com', name: 'Nikola Tesla'}, {email: 'someone@gmail.com'} ], render: { item: function(item, escape) { return '' + (item.name ? '' + escape(item.name) + '' : '') + (item.email ? '' + escape(item.email) + '' : '') + ''; }, option: function(item, escape) { var label = item.name || item.email; var caption = item.name ? item.email : null; return '' + '' + escape(label) + '' + (caption ? '' + escape(caption) + '' : '') + ''; } }, createFilter: function(input) { var match, regex; // email@address.com regex = new RegExp('^' + REGEX_EMAIL + '$', 'i'); match = input.match(regex); if (match) return !this.options.hasOwnProperty(match[0]); // name regex = new RegExp('^([^<]*)\$', 'i'); match = input.match(regex); if (match) return !this.options.hasOwnProperty(match[2]); return false; }, create: function(input) { if ((new RegExp('^' + REGEX_EMAIL + '$', 'i')).test(input)) { return {email: input}; } var match = input.match(new RegExp('^([^<]*)\$', 'i')); if (match) { return { email : match[2], name : $.trim(match[1]) }; } alert('Invalid email address.'); return false; } }); });
application.html.erb
true %> true %>
Java脚本/ application.js中
//= require jquery //= require jquery_ujs //= require jquery-ui //= require bootstrap //= require turbolinks //= require selectize //= require_tree .
Selectize.js似乎包含在我的应用程序中： 这是来自我的页面源的 ：
Gemfile ：
source 'https://rubygems.org' ruby '2.0.0' gem 'rails', '4.0.10' gem 'bootstrap-sass', '~> 2.3.2.0' gem 'sprockets', '~> 2.12' gem 'chosen-rails' gem 'bcrypt', '~> 3.1.7' gem 'therubyracer' gem 'sass-rails', '4.0.5' gem 'uglifier', '~> 2.1.1' gem 'coffee-rails', '~> 4.0.1' gem 'jquery-rails', '~> 2.3.0' gem 'turbolinks', '~> 1.1.1' gem 'jbuilder', '~> 1.0.2' gem 'libv8', '3.16.14.7' gem 'yaml_db_improved' gem 'selectize-rails' group :development, :test do gem 'sqlite3', '~> 1.3.8' gem 'rspec-rails', '~> 2.13.1' end group :test do gem 'selenium-webdriver', '~> 2.35.1' gem 'capybara', '~> 2.1.0' end group :doc do gem 'sdoc', '~> 0.3.20', require: false end group :production do gem 'rails_12factor', '~> 0.0.2' end
config / environments / production.rb ：
Website::Application.configure do config.cache_classes = true config.eager_load = true config.consider_all_requests_local = false config.action_controller.perform_caching = true config.serve_static_assets = false config.assets.js_compressor = :uglifier config.assets.compile = false config.assets.digest = true config.assets.version = '1.0' config.log_level = :info config.i18n.fallbacks = true config.active_support.deprecation = :notify config.log_formatter = ::Logger::Formatter.new end
config / environments / development.rb ：
Website::Application.configure do config.cache_classes = false config.eager_load = false config.consider_all_requests_local = true config.action_controller.perform_caching = false config.action_mailer.raise_delivery_errors = false config.active_support.deprecation = :log config.active_record.migration_error = :page_load config.assets.debug = true end
config / application.rb ：
require File.expand_path('../boot', __FILE__) require "active_record/railtie" require "action_controller/railtie" require "action_mailer/railtie" require "sprockets/railtie" Bundler.require(*Rails.groups) module Website class Application < Rails::Application config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif) end end
使用Selectize的人是否知道我可能会缺少什么？
更新：
它变得更奇怪： 容易出错的代码随机开始工作，但在刷新后再次破坏
我认为你有一个由jQuery-rails gem引起的jQuery依赖问题。 试试这个：
1）在你的Gemfile注释掉这一行
gem 'coffee-rails', '~> 4.0.1' #gem 'jquery-rails', '~> 2.3.0' gem 'turbolinks', '~> 1.1.1'
2）运行bundle install
3）下载此版本的jQuery并输入您的vendor/assets/javascript文件夹。
编辑
要迁移到非gem版本，请将这些文件放在以下路径中：
- 供应商/资产/样式表/ selectize.css
- 供应商/资产/ JavaScript的/ selectize.min.js
- 供应商/资产/ JavaScript的/ sifter.js
- 供应商/资产/ JavaScript的/ microplugin.js
对我来说，问题是我的应用程序代码在selectize.js之前被包含。 添加//= require selectize在//= require_tree .之前选择app/assets/javascripts/application.js //= require_tree . 固定它。
//= require jquery //= require jquery_ujs //= require turbolinks //= require selectize //= require_tree .
我通过删除jQuery include解决了同样的问题，包括两次。 在评论中有关于此的说明，但它已经崩溃了，我自己想出来了。 发布此作为人们注意到它的答案。