Javascript只会在刷新页面后才起作用

我正在使用Bootstrap 3.2.0。我正在尝试使用两个bootstrap JavaScript功能：Scrollspy和Affix。我们的目标是在使用词缀的同时滚动页面的其余部分。 Demo Javascript只会在刷新页面后才起作用

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

$(document).ready(function() { 

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

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

}

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

当我将词缀插件直接放入正文中时，它的工作原理没有更新。但我真的不想使用内联JavaScript。我很好奇为什么这种奇怪的行为正在发生。

我正在使用Rails 4.1.5。

来源

2014-09-22 Sung Won Cho

Turbolinks

问题的解决方案几乎可以肯定Turbolinks - 这是指一个JavaScript库仅以便在检索<body>标签，以加快网页从新的请求，保持完整的<head>。

虽然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);

来源

2014-09-22 06:48:50

谢谢你，我把它通过围绕'$（文件）。就绪整个代码工作（函数（）{}）'和'$（窗口）.bind（'page：change'，function（）{}）'但是你的解决方案要简单得多。 – 2014-09-22 11:36:59

我只是想围绕这个情况来回头。我对这个问题的理解是，我在Turbolinks加载JS文件后添加了新的DOM元素，除非刷新页面，否则JS文件无法绑定到新元素。那是对的吗？ – 2014-09-22 11:42:41

这可能是一个涡轮问题。尽量遵循了类似的问题

Rails javascript only works after reload

来源

2014-09-22 05:45:17 ProblemSlover

Javascript只会在刷新页面后才起作用

回答

相关问题