Question

我正在构建我的第一个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 %>

和我的超级导航栏，现在看起来像这样（也在app / views / layouts下）

<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 ，它再次工作

因此，如果我想使用导航栏，我必须刷新每一页。

你知道我该怎么做才能解决这个问题吗？

Answer 1

这可能是由Rails Turbolinks引起的问题。

Rails 4.0引入了一个名为Turbolinks的功能，以提高网站的感知速度。通过仅在跟踪链接时更新正文和页面标题，Turbolinks使应用程序看起来更快。通过不重新加载整个页面，Turbolinks减少了浏览器渲染时间并减少了访问服务器的时间。使用Turbolinks，用户会关注链接并看到新页面，但您的JavaScript认为页面未更改，因为尚未加载新页面。要解决此问题，您可以通过从Gemfile中删除turbolinks gem来禁用Turbolink。

您还可以修改JavaScript。要确保在使用Rails Turbolinks时跟踪每个页面，请添加以下JavaScript：

// accommodate Turbolinks
$(document).on('ready page:change', function() {
. . .
})

当更换页面时，Turbolink会触发page:change事件。代码侦听page:change事件并调用JavaScript方法。这段代码可行甚至在未通过Turbolinks访问的页面上（例如，访问的第一页）。

我写过一本书Learn Ruby on Rails，其中包含一章关于JavaScript的内容，并涵盖了Turbolinks问题。

Answer 2

对我来说，当我将所有$(document).ready(function(){更改为以下内容时，它起作用了：

$(document).on("ready page:load", function(){

从页面导航到页面时，JavaScript不会执行

2 个答案: