Rails 4 Bootstrap3下载工作，然后不起作用

Question

我把这个下拉列表放在第A页：

<span class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dLabel">
    <li>This
    <li>That
  </ul>
</span>

......它运作得很好。

当我浏览到页面B然后浏览回到页面A时，页面上会显示下拉列表，但单击下拉列表不会再展开下拉窗口。好像javascript的某些方面不再有效。

开发人员工具中的控制台显示没有错误，并且rails服务器日志显示没有错误。

如果我继续留在页面A并重新加载页面，则下拉列表有效。这个问题始终可以重现。

我甚至不确定从哪里开始寻找解决此类问题的方法。如果没有立即明白一个简单的解决方案，那么如何缩小问题范围呢？非常感谢。

我的application.js文件包含：

//= require jquery
//= require jquery-ui/sortable
//= require jquery_ujs
//= require jquery.turbolinks
//= require turbolinks
//= require bootstrap-sprockets
//= require cocoon
//= require steps.js.coffee
//= require protocols.js.coffee
//= require retina-1.1.0.js
//= require ie10-viewport-bug-workaround.js

更新：

luissimo的答案解决了上述问题。现在点击下拉列表始终有效。然而，这已经发现了一个新问题。 dropdwon窗口正确显示。当我浏览到页面B然后返回到页面A时，下拉列表会偏移，如下所示：

这个问题是否有更根本的根本原因？

更新：

改变：

<span class="dropdown">

到：

<span class="btn dropdown">

...解决了偏移问题。

Answer 1

看起来你需要JS文件的顺序不太合适。

来自https://github.com/kossnocorp/jquery.turbolinks#usage，

您的application.js

应该具有以下结构

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//
// ... your other scripts here ...
//
//= require turbolinks

但是你的主要节日不符合宝石jquery-turbolinks的要求。尝试更改订单，看看它是否有效。

Answer 2

这是因为Turbolinks会导致页面：每次单击链接时都会发生更改事件，因此每次都会重新评估Javascript。这就是为什么它最初工作，但当你改变页面时它可能会失效。这是最简单的解决方法。

 <script>
   $('#dLabel').dropdown()
 </script>

您还可以将data-turbolinks-eval=false添加到application.js <script> tag，以便在点击链接后中断重新评估。