jQuery 在 Rails 上发生冲突
jQuery conflict on Rails
我的application.js
:
//= require rails-ujs
//= require jquery
//= require activestorage
//= require turbolinks
//= require bootstrap-sprockets
//= require flatpickr.min
//= require_tree .
我的Gemfile
:
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.2'
gem 'turbolinks', '~> 5'
gem 'bootstrap-sass'
gem 'jquery-rails'
如果我
我就这样离开我的应用程序,我所有的 jQuery 都可以正常工作。不过我也需要
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"</script>
</head>
在我的 application.html.erb
上,因为我正在使用 Bootstrap 4.
因此,使用此配置,我的 jQuery 遇到了很多问题,例如
$(...).flatpickr is not a function
有没有办法避免这些冲突?
我想那是因为我在我的应用程序中包含多个 jQueries。
如果我删除 //= require jquery
,所有 Bootstrap 相关的 jQuery 都可以工作,但我的自定义脚本不会。
如果我删除 <script src="https://code.jquery.com/jquery-3.3.1.min.js"</script>
我的脚本会工作,但所有 Bootstrap 相关的都不会(比如汉堡导航栏或类似的)。
以下是将 bootstrap 4 添加到您的 rails 应用程序的步骤 5 这里是指向 rubygems and github 页面的链接。
第 1 步:将 bootstrap 和 jquery-rails 添加到您的 Gemfile(确保 sprockets-rails 至少是 v2.3.2)
gem 'bootstrap', '~> 4.2.1'
gem 'jquery-rails'
第 2 步:将 Bootstrap 依赖项和 Bootstrap 添加到您的 application.js
//= require jquery3
//= require popper
//= require bootstrap
您不需要在视图中指定 jquery 的 cdn,这是 //= require jquery3 行的功能。并删除 bootstrap-sass 对 bootstrap 3
的依赖
注意: 重要的是要注意你需要 require jquery3 和 //= require jquery3
我的application.js
:
//= require rails-ujs
//= require jquery
//= require activestorage
//= require turbolinks
//= require bootstrap-sprockets
//= require flatpickr.min
//= require_tree .
我的Gemfile
:
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.2'
gem 'turbolinks', '~> 5'
gem 'bootstrap-sass'
gem 'jquery-rails'
如果我 我就这样离开我的应用程序,我所有的 jQuery 都可以正常工作。不过我也需要
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"</script>
</head>
在我的 application.html.erb
上,因为我正在使用 Bootstrap 4.
因此,使用此配置,我的 jQuery 遇到了很多问题,例如
$(...).flatpickr is not a function
有没有办法避免这些冲突? 我想那是因为我在我的应用程序中包含多个 jQueries。
如果我删除 //= require jquery
,所有 Bootstrap 相关的 jQuery 都可以工作,但我的自定义脚本不会。
如果我删除 <script src="https://code.jquery.com/jquery-3.3.1.min.js"</script>
我的脚本会工作,但所有 Bootstrap 相关的都不会(比如汉堡导航栏或类似的)。
以下是将 bootstrap 4 添加到您的 rails 应用程序的步骤 5 这里是指向 rubygems and github 页面的链接。
第 1 步:将 bootstrap 和 jquery-rails 添加到您的 Gemfile(确保 sprockets-rails 至少是 v2.3.2)
gem 'bootstrap', '~> 4.2.1'
gem 'jquery-rails'
第 2 步:将 Bootstrap 依赖项和 Bootstrap 添加到您的 application.js
//= require jquery3
//= require popper
//= require bootstrap
您不需要在视图中指定 jquery 的 cdn,这是 //= require jquery3 行的功能。并删除 bootstrap-sass 对 bootstrap 3
的依赖注意: 重要的是要注意你需要 require jquery3 和 //= require jquery3