我正在构建我的第一个 Ruby on Rails 应用程序,并尝试创建一个动画导航栏。我正在使用 jQuery 和 Turbolink。
这是我的 application.js
(位于 /app/assets/javascripts
下)
$(document).ready(function(){
$("#nav").hover(function(){
$("#nav").animate({left:'10px'});
},
function(){
$("#nav").animate({left:'-220px'});
});
});
在application.html.erb
(在app/views/layouts
下),我有
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
还有我的 super 导航栏,现在看起来像这样(也在应用程序/ View /布局下)
<div id='nav'>
<%= image_tag('arrow.png', size: '20x20', id: "arrow") %>
<ul>
<li><%= link_to 'Main page', root_path%></li>
<li><%= link_to 'Résumé', resume_path %></li>
</ul>
</div>
当我加载应用程序时,动画起作用,但是当我导航到应用程序的其他页面时,动画停止起作用。如果我按 F5,它会再次工作
因此,如果我想使用导航栏,我必须刷新每个页面。
你知道我可以做什么来解决这个问题吗?
最佳答案
这可能是由 Rails Turbolinks 引起的问题。
Rails 4.0 引入了名为 Turbolinks 的功能提高网站的感知速度。 Turbolinks 仅在点击链接时更新页面的正文和标题,从而使应用程序显示得更快。通过不重新加载整个页面,Turbolinks 减少了浏览器渲染时间和服务器访问次数。 使用 Turbolinks,用户点击链接并看到一个新页面,但您的 JavaScript 认为该页面没有更改,因为尚未加载新页面。要解决此问题,您可以通过从 Gemfile 中删除 Turbolinks gem 来禁用 Turbolinks。
您还可以修改 JavaScript。为了确保在使用 Rails Turbolinks 时跟踪每个页面,请添加以下 JavaScript:
// accommodate Turbolinks
$(document).on('ready page:change', function() {
. . .
})
当页面被替换时,Turbolinks 会触发 page:change
事件。该代码监听 page:change
事件并调用 JavaScript 方法。这段代码将起作用
即使在未通过 Turbolinks 访问的页面上(例如,访问的第一个页面)。
我写了一本书,Learn Ruby on Rails ,其中包括有关 JavaScript 的一章并涵盖了 Turbolinks 问题。
关于从一个页面导航到另一个页面时,JavaScript 不会执行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24500641/