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

Question

我正在构建我的第一个 Ruby on Rails 应用程序，并尝试创建一个动画导航栏。我正在使用 jQuery 和 Turbolink。

\n\n

这是我的application.js（下/app/assets/javascripts）

\n\n

$(document).ready(function(){\n  $("#nav").hover(function(){\n    $("#nav").animate({left:\'10px\'});\n  },\n  function(){\n    $("#nav").animate({left:\'-220px\'});\n  });\n});\n

\n\n

application.html.erb在（下）上app/views/layouts，我有

\n\n

<%= javascript_include_tag "application", "data-turbolinks-track" => true %>\n

\n\n

和我的超级导航栏，现在看起来像这样（也在应用程序/视图/布局下）

\n\n

<div id=\'nav\'>\n  <%= image_tag(\'arrow.png\', size: \'20x20\', id: "arrow") %>\n  <ul>\n    <li><%= link_to \'Main page\', root_path%></li>\n    <li><%= link_to \'R\xc3\xa9sum\xc3\xa9\', resume_path %></li>\n  </ul>\n</div>\n

\n\n

当我加载应用程序时，动画起作用，但是当我导航到应用程序的其他页面时，动画停止工作。如果我按F5，它就会再次工作

\n\n

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

\n\n

你知道我能做什么来解决这个问题吗？

\n

Answer 1

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

\n\n

Rails 4.0 引入了名为Turbolinks 的功能来提高网站的感知速度。Turbolinks 仅在点击链接时更新页面的正文和标题，从而使应用程序显示得更快。通过不重新加载整个页面，Turbolinks 减少了浏览器渲染时间并减少了到服务器的次数。\n使用 Turbolinks，用户点击链接并看到一个新页面，但您的 JavaScript 认为该页面尚未\xe2\x80\x99 更改，因为新页面尚未加载。要解决此问题，您可以通过从 Gemfile 中删除 Turbolinks gem 来禁用 Turbolinks。

\n\n

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

\n\n

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

\n\n

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

\n\n

我写了一本书《Learn Ruby on Rails》，其中有一章介绍 JavaScript 并涵盖了 Turbolinks 问题。

\n