JQuery Rails 4 个应用程序使用 Bootstrap 发生冲突

Question

我在使用 Bootstrap 的 Rails 4.1.8 应用程序中添加了几个 JQuery 函数 3. 这些函数是为了解决应用 "active" 当前导航选项卡的样式。

这些函数可以很好地删除活动 class 并将其应用于单击的选项卡，这很棒。问题是选项卡 不再作为链接工作 。悬停时，目标地址会显示在浏览器对话框中。但是当点击时，没有任何反应。控制台中甚至没有事件。甚至不会抛出任何错误。不过颜色会变。

active_menu_item.js

$(document).ready(function() {
    $('li>a.tab_link').click(function(e) {
      $('li>a.tab_link').removeClass('active');
      var $this = $(this);
      if (!$this.hasClass('active')) {
        $this.addClass('active');
      }
      e.preventDefault();
    });
});

$(document).ready(function() {
    $('.nav-pills li a.btn').click(function(e) {
      $('.nav-pills li a.btn').removeClass('active');
      var $this = $(this);
      if (!$this.hasClass('active')) {
        $this.addClass('active');
      }
      e.preventDefault();
    });
});

来自 application.html.erb 标签..

<!-- Load javascripts -->
<%= javascript_include_tag 'application', 'data-turbolinks-track' => false %>

application.js

//
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require change_theme
//= require active_menu_item
//= require_self
//= require_tree .

Gem文件

source 'https://rubygems.org'

gem 'rails', '4.1.8'
gem 'mysql2'
gem 'sass-rails', '~> 5.0.3'
gem 'compass', '~> 1.0.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'kaminari'
gem 'therubyracer',  platforms: :ruby
gem 'jquery-rails'
gem 'turbolinks'
gem 'jquery-turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0',          group: :doc
gem 'spring',        group: :development
gem 'fabrication', '~> 2.12.2'
gem 'ffaker'
gem 'forgery'
gem 'rufus-scheduler', '~> 3.1.1'
gem "activeuuid"
gem 'foreigner', '~> 1.7.2'
gem 'aws-sdk', '~> 2.0.24'
group :development do
  gem 'rails-erd', '~> 1.3.0'
end
gem 'bootstrap-sass', '~> 3.2.0'
gem 'autoprefixer-rails'
gem 'bootstrap_form'
gem 'puma', '~> 2.11.1'
gem 'devise'

尝试删除 e.preventDefault(); 行，但它根本不起作用。我还尝试在 application.html.erb 中将 TurboLinks 设置为 "false"，并删除 application.js 中的 TurboLinks 引用作为以及 Turbolinks Gem 和 Jquery-Turbolinks gem，但它们什么也没做。它还破坏了很多其他东西，所以我把它放回去了。

我很确定这是我编写函数的方式的问题。我的 JQuery 很糟糕（仍在学习中），我或多或少地找到了功能并修改它们以满足我的需要。我真的不明白我是否正确加载了 JQuery。我猜我有点希望 Rails gem 们正在为我这样做？

我对JQuery知之甚少，在问这个问题之前进行了广泛的搜索。我知道这些功能的目标是正确的，因为它们会改变颜色并保持不变，直到我点击其他东西。唯一的问题是，一旦点击链接就会完全禁用。如果需要任何其他代码来找到解决方案，我很乐意 post 它。

编辑： 做了一个 fiddle 来演示。但是，它并没有显示实际问题 - 链接会改变颜色，但不再作为链接使用。

请帮忙。

谢谢

Answer 1

您的链接无法正常工作的原因是您在回传中指定了 e.preventDefault()。查看（此处）[http://api.jquery.com/event.preventdefault/] 了解更多信息。

如果您在回调中删除该行，您会看到您的链接现在可以正常工作，但会发生其他意想不到的事情 - 颜色会短暂改变（由于 active class 应用）但是当页面重新呈现时恢复正常。这是因为当点击处理程序被立即调用并添加 class 时，Turbolinks 然后用响应替换整个主体。

我建议不要使用 jQuery 而是依靠 current_page? 助手来确定是否应应用 class。换句话说，在呈现链接的视图中，执行类似这样的操作

<li class="<%= 'active' if current_page?(about_path) %>"><%= link_to "About", about_path %></li>

希望这对您有所帮助。

JQuery Rails 4 个应用程序使用 Bootstrap 发生冲突

JQuery conflict in Rails 4 app using Bootstrap

javascript

jquery

ruby-on-rails

twitter-bootstrap

turbolinks