I recently upgraded my site to Bootstrap 3 and am in the process of going through all the layouts to update class names and various functionality to work correctly. My most recent problem is that drop downs don't seem to be working. At first I thought I hadn't implemented the code correctly for my nav bar, but after getting frustrated, I actually tried just getting rid of my nav bar and using the one straight out of the BS 3 documentation. Even that code doesn't work. I've looked into this, and I'm fairly certain I have all the proper .js libraries loaded. Here's my application.js:
//= require jquery
//= require bootstrap-sprockets
//= require jquery.ui.datepicker
//= require jquery.timepicker.js
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require jquery.remotipart
//= require chosen-jquery
//= require_tree .
Here's what appears in my <head>:
<script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/affix.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/alert.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/button.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/carousel.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/collapse.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/dropdown.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/tab.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/transition.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/scrollspy.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/modal.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/tooltip.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/popover.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap-sprockets.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.core.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.datepicker.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.timepicker.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.iframe-transport.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.remotipart.js?body=1"></script>
And I have popovers and other collapsible items on the same page, and all works fine, so I'm fairly certain all the .js is in tact.
I've read elsewhere that turbolinks can create problems for Bootstrap 3, and have even tried (and then abandoned and reverted back) the jquery.turbolinks gem to no avail. Needless to say, I have no idea how to reproduce this on jsfiddle (sorry).
Finally, I've verified that the following four js functions are called every time I click a drop down, presumably in the following order:
jquery.js:4306
eventHandle = elemData.handle = function( e ) {
// Discard the second event of a jQuery.event.trigger() and
// when an event is called after a page has unloaded
return typeof jQuery !== strundefined && (!e || jQuery.event.triggered !== e.type) ?
jQuery.event.dispatch.apply( eventHandle.elem, arguments ) :
undefined;
};
// Add elem as a property of the handle fn to prevent a memory leak with IE non-native events
eventHandle.elem = elem;
turbolinks.js:324
installClickHandlerLast = function(event) {
if (!event.defaultPrevented) {
document.removeEventListener('click', handleClick, false);
return document.addEventListener('click', handleClick, false);
}
};
tujquery.js:4306 (again)
turbolinks.js:324
handleClick = function(event) {
var link;
if (!event.defaultPrevented) {
link = extractLink(event);
if (link.nodeName === 'A' && !ignoreClick(event, link)) {
visit(link.href);
return event.preventDefault();
}
}
};
Any clue what might be happening here and how to fix it?
This issue can be resolved without using jquery-turbolinks. You need to first understand why this happens. When turbolinks is enabled and you click on a link, a page:change event is fired and all javascript is re-evaluated from the newly loaded html.
This includes the bootstrap javascript code that's loaded within application.js. When bootstrap's javascript is reloaded, it breaks. You can fix this by using data-turbolinks-eval=false in the application.js <script> tag.
For ERB:
<%= javascript_include_tag 'application', 'data-turbolinks-eval' => false %>
<%= javascript_include_tag params[:controller] %>
For SLIM:
== javascript_include_tag 'application', 'data-turbolinks-eval': false
== javascript_include_tag params[:controller]
I answered this question over at: turbolinks issues with bootstrap modal
In short: you need the jquery-turbolinks gem.
I was able to solve the problem by adding "data-turbolinks-eval" => false to my Bootstrap CDN link.
<%= javascript_include_tag
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js",
"data-turbolinks-eval" => false
%>
You are not using turbolinks the good way. The turbolinks should not be used with assets. The method of using turbolinks can be seen here: Handling Turbolinks and JS incompatibility in Rails
You should not change any javascript_links. Just in App/assets/javascripts/application.js put code like:
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//
// ... your other scripts here ...
//
//= require turbolinks
after putting jquery-turbolinks in Gemfile. The bootstrap require should come in between jquery.turbolinks and turbolinks.
See this answer on twbs github: https://github.com/twbs/bootstrap-sass/issues/714
来源：https://stackoverflow.com/questions/26132384/bootstrap-3-dropdown-doesnt-work-with-rails-4-turbolinks