Bootstrap 3 下拉菜单不适用于 Rails 4 &涡轮链接 [英] Bootstrap 3 dropdown doesn't work with Rails 4 & Turbolinks
问题描述
我最近将我的网站升级到 Bootstrap 3，并且正在检查所有布局以更新类名和各种功能以使其正常工作.我最近的问题是下拉菜单似乎不起作用.起初我以为我没有为我的导航栏正确实现代码，但在感到沮丧之后，我实际上尝试摆脱我的导航栏并直接使用 BS 3 文档.即使该代码不起作用.我已经调查过了，我相当确定我已经加载了所有正确的 .js 库.这是我的 application.js:
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>
而且我在同一页面上有弹出框和其他可折叠项目，并且一切正常，所以我相当确定所有 .js 都完好无损.
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.
我在别处读到 turbolinks 会为 Bootstrap 3 带来问题，甚至尝试(然后放弃并恢复)jquery.turbolinks gem 无济于事.不用说，我不知道如何在 jsfiddle 上重现这个(抱歉).
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).
最后，我验证了每次点击一个下拉菜单都会调用以下四个js函数，大概按以下顺序:
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
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
turbolinks.js:324
installClickHandlerLast = function(event) {
if (!event.defaultPrevented) {
document.removeEventListener('click', handleClick, false);
return document.addEventListener('click', handleClick, false);
}
};
tujquery.js:4306(再次)
tujquery.js:4306 (again)
turbolinks.js:324
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?
推荐答案
此问题无需使用 jquery-turbolinks 即可解决.您首先需要了解为什么会发生这种情况.当启用 turbolinks 并单击链接时，会触发 page:change 事件，并且所有 javascript 都会从新加载的 html 中重新计算.
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.
这包括在 application.js 中加载的引导 javascript 代码.重新加载引导程序的 javascript 时，它会中断.您可以通过在 application.js
