我正在使用 Bootstrap 3.2.0。我正在尝试同时使用两个 bootstrap javascript 功能:Scrollspy 和 Affix。目标是在一侧制作一个 scrollspy，它将使用词缀与页面的其余部分一起滚动。 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 运行顺畅，但 affix 插件却不行，除非我在初始加载后刷新页面。使用 chrome 中的开发人员工具，我注意到 javascript 不会在第一次加载页面时将 affix-top 添加到 sidebar。
当我将词缀插件 javascript 直接放入正文时，它无需刷新即可工作。但我真的不想使用内联 javascript。我真的很好奇为什么会发生这种奇怪的行为。
我正在使用 Rails 4.1.5。
最佳答案
涡轮链接
问题几乎可以肯定是Turbolinks - 一个 javascript 库，旨在通过仅检索 <body> 来加速您的页面来自新请求的标记，留下 <head>完好无损。
虽然 Turbolinks 非常有效，但它确实有通过不刷新页面上的 Javascript 来“破坏”应用程序功能的倾向。
--
问题是因为 JS 只绑定(bind)到 DOM 元素，DOM 元素是在 JS 加载时加载的。如果 Turbolinks 在不刷新 JS 的情况下加载新元素，它会无意中让 JS 认为您没有刷新您的元素/页面，从而阻止它“绑定(bind)”到您的新元素
解决这个问题有两个方面:
- "Delegate" your JS from a consistent element (typically
document)- Use the Turbolinks "event hooks" to manage on-page 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);
关于Javascript 仅在刷新页面后才起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25967082/