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

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

  true %> 

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

当我加载我的应用程序时，动画可以正常工作，但是当我导航到应用程序的其他页面时，动画将停止工作。 如果按F5 ，它会再次运行

所以如果我想使用我的导航栏，我必须刷新每一页。

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

Answer 1

这可能是由R​​ails Turbolinks引起的问题。

Rails 4.0引入了一个名为Turbolinks的function，以提高网站的感知速度。 通过仅在跟踪链接时更新正文和页面标题，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 event并调用JavaScript方法。 此代码甚至可以在未通过Turbolinks访问的页面上工作（例如，访问的第一页）。

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