Javascript 只有在刷新页面后才能工作

我正在使用 Bootstrap 3.2.0。我正在尝试同时使用两个 bootstrap javascript 功能:Scrollspy 和 Affix。目标是在侧面制作一个滚动 spy ，使用词缀与页面的其余部分一起滚动。 Demo

下面是我的 javascript 文件，包含在 Rails Assets 管道的 head 中。

$(document).ready(function () {

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

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

}

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

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

我正在使用 Rails 4.1.5。

最佳答案

Turbolinks

问题几乎肯定是 Turbolinks - 一个 javascript 库，旨在通过仅从新请求中检索 <body> 标记来加速您的页面，而保持 <head> 不变。

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

——

问题是因为 JS 只绑定(bind)到加载 JS 时加载的 DOM 元素。如果Turbolinks加载新元素没有刷新JS，不经意间让JS认为你没有刷新你的元素/页面，从而阻止它“绑定(bind)”到你的新元素

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

这是我要做的:

#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);

关于Javascript 只有在刷新页面后才能工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25967082/

JavaScript

Javascript 只有在刷新页面后才能工作