Question

我正在使用Bootstrap 3.2.0。我试图一起使用两个bootstrap javascript功能：Scrollspy和Affix。目标是使用词缀在页面的其余部分滚动一侧。 Demo

以下是我的javascript文件，包含在Rails资产管道的head中。

$(document).ready(function () {

  // Use affix plugin
  $("#sidebar").affix({
    offset: { top: 280 }
  });

  // Use Scrollspy
  $('body').scrollspy({ target: '#sidebar', offset: 200 });

}

scrolllspy工作顺利，但是附加插件没有，除非我在初始加载后刷新页面。使用chrome中的开发人员工具，我注意到第一次加载页面时，javascript不会将affix-top添加到sidebar。

当我将affix插件javascript直接放入正文时，它无需刷新即可正常工作。但我真的不想使用内联javascript。而且我很好奇为什么会发生这种奇怪的行为。

我正在使用Rails 4.1.5。

Answer 1

<强> Turbolinks

这个问题几乎可以肯定Turbolinks - 一个javascript库，它只是通过从新请求中检索<body>标记来加速您的网页，保持<head>完整无缺。< / p>

尽管Turbolinks非常有效，但它确实倾向于通过不刷新页面上的Javascript来“破坏”应用程序功能。

-

问题在于，因为JS只绑定了在加载JS时加载的DOM元素。如果Turbolinks在没有刷新JS的情况下加载新元素，它会无意中让JS认为你没有刷新你的元素/页面，从而阻止它能够“绑定”到你的新元素

解决这个问题的方法有两个：

"Delegate"来自一致元素的JS（通常为document）

使用Turbolinks“事件挂钩”来管理页面上的JS events

这就是我要做的事情：

#app/assets/javascripts/application.js
var loaded = function(){

  // Use affix plugin
  $("#sidebar").affix({
    offset: { top: 280 }
  });

  // Use Scrollspy
  $('body').scrollspy({ target: '#sidebar', offset: 200 });

}
$(document).on("page:load ready", loaded);

Answer 2

这可能是一个涡轮问题。尝试遵循类似问题的解决方案

Rails javascript only works after reload

只有刷新页面后，Javascript才会生效

2 个答案: