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

【问题标题】：JavaScript doesn't execute when navigating from page to page从一个页面导航到另一个页面时，JavaScript 不执行
【发布时间】：2014-06-30 23:58:38
【问题描述】：

我正在构建我的第一个 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，它会再次工作

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

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

【问题讨论】：

标签： javascript jquery ruby-on-rails ruby-on-rails-4 turbolinks

【解决方案1】：

这可能是由 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 问题。

【讨论】：

【解决方案2】：

对我来说，当我将所有 $(document).ready(function(){ 更改为：

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

【讨论】：