Javascript 仅在刷新页面后才能工作答案

【问题标题】：Javascript will only work after refreshing the pageJavascript 仅在刷新页面后才能工作
【发布时间】：2014-11-16 00:08:46
【问题描述】：

我正在使用 Bootstrap 3.2.0。我正在尝试同时使用两个引导 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 });

}

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

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

我使用的是 Rails 4.1.5。

【问题讨论】：

标签： javascript jquery ruby-on-rails twitter-bootstrap

【解决方案1】：

Turbolinks

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

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

问题是因为 JS 只绑定到 DOM 元素，这些元素是在 JS 加载时加载的。如果 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);

【讨论】：

谢谢，我通过将整个代码包装在 $(document).ready(function() {}) 和 $(window).bind('page:change', function() {}) 周围使它工作，但您的解决方案要简单得多。
我只是想了解一下这种情况。我对这个问题的理解是我在 Turbolinks 加载 JS 文件后添加了新的 DOM 元素，除非我刷新页面，否则 JS 文件无法绑定到新元素。对吗？

【解决方案2】：

这可能是 turbolinks 问题。尝试遵循类似问题的解决方案

Rails javascript only works after reload

【讨论】：