TypeError: $(...).selectize不是一个函数[英] TypeError: $(...).selectize is not a function

本文是小编为大家收集整理的关于TypeError: $(...).selectize不是一个函数的处理方法,想解了TypeError: $(...).selectize不是一个函数的问题怎么解决?TypeError: $(...).selectize不是一个函数问题的解决办法?那么可以参考本文帮助大家快速定位并解决问题。

问题描述

我将"selectize-rails" gem 安装到我的 rails 应用程序中,我正在努力让它工作.我的网络控制台中不断出现此错误:

TypeError: $(...).selectize is not a function

浏览器中没有任何反应.这是我到目前为止的代码,遵循此页面中的"电子邮件联系人"示例:http://brianreavis.github.io/selectize.js/

<小时>

views/emails/new.html.erb

<script type="text/javascript">


  $(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 '<div>' +
            (item.name ? '<span class="name">' + escape(item.name) + '</span>' : '') +
            (item.email ? '<span class="email">' + escape(item.email) + '</span>' : '') +
          '</div>';
        },
        option: function(item, escape) {
          var label = item.name || item.email;
          var caption = item.name ? item.email : null;
          return '<div>' +
            '<span class="label">' + escape(label) + '</span>' +
            (caption ? '<span class="caption">' + escape(caption) + '</span>' : '') +
          '</div>';
        }
      },
      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 <email@address.com>
        regex = new RegExp('^([^<]*)\<' + REGEX_EMAIL + '\>$', '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('^([^<]*)\<' + REGEX_EMAIL + '\>$', 'i'));
        if (match) {
          return {
            email : match[2],
            name : $.trim(match[1])
          };
        }
        alert('Invalid email address.');
        return false;
      }
    });
  });
</script>
<小时>

application.html.erb

<head>
  <%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
  <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
  <%= csrf_meta_tags %>
  <%= javascript_include_tag "jquery.endless-scroll" %>
  <%= yield(:head) %>
</head>
<小时>

javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require bootstrap
//= require turbolinks
//= require selectize
//= require_tree .
<小时>

Selectize.js 似乎包含在我的应用程序中:这是来自我的页面源代码的 <head>:

<!DOCTYPE html>
<html>
<head>
<!--...-->
  <link href="/assets/selectize.css?body=1" media="screen" rel="stylesheet" />  
  <link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/custom.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/jquery-ui.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/jquery-ui.structure.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/jquery-ui.theme.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/users.css?body=1" media="all" rel="stylesheet" />
  <script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-ui.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/sifter.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/microplugin.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/selectize.min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.color.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.endless-scroll.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/users.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
  <meta content="authenticity_token" name="csrf-param" />
<meta content="KjspKaF93jfFsjf8jsoaisHSf=" name="csrf-token" />
</head>
<小时>

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 的人知道我可能遗漏了什么吗?

更新:

它变得更奇怪了:错误-prone 代码随机开始工作,但在刷新时再次中断

推荐答案

我认为您有一个由 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) 下载 this 版本的 jQuery 并放入您的vendor/assets/javascript 文件夹.

编辑

要迁移到非 gem 版本,请将这些文件放在以下路径中:

  • vendor/assets/stylesheets/selectize.css
  • vendor/assets/javascript/selectize.min.js
  • vendor/assets/javascript/sifter.js
  • vendor/assets/javascript/microplugin.js

其他推荐答案

我通过删除 jQuery 包含解决了同样的问题,该包含两次.评论中有关于这一点的说明,但它已经崩溃了,我自己弄明白了.将此作为答案发布以供人们注意.

其他推荐答案

对我来说,问题是我的应用程序代码被包含在selectize.js之前.在 //= require_tree . 修复它之前将 //= require selectize 添加到 app/assets/javascripts/application.js.

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require selectize
//= require_tree .

本文地址:https://www.itbaoku.cn/post/786743.html