从页面导航到页面时JavaScript不执行 [英] JavaScript doesn't execute when navigating from page to page

问题描述

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

I'm building my first Ruby on Rails application and I tried to create an animated navigation bar. I'm using jQuery and 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下)

and my super navigation bar, which look like this for now (also under 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 ，它将再次正常运行

When I load my app, the animation works, but when I navigate to an other page of the app, the animation stops working. If I press F5, it's working again

因此，如果要使用导航栏，则必须刷新每个页面.

So if I want to use my navigation bar, I have to refresh every page.

您知道该怎么做吗?

推荐答案

可能是Rails Turbolinks引起的问题.

It's likely a problem caused by Rails Turbolinks.

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

Rails 4.0 introduced a feature named Turbolinks to increase the perceived speed of a website. Turbolinks makes an application appear faster by only updating the body and the title of a page when a link is followed. By not reloading the full page, Turbolinks reduces browser rendering time and trips to the server. With Turbolinks, the user follows a link and sees a new page but your JavaScript thinks the page hasn’t changed because a new page has not been loaded. To resolve the issue, you could disable Turbolinks by removing the turbolinks gem from the Gemfile.

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

You can also modify your JavaScript. To make sure every page is tracked when Rails Turbolinks is used, add the following JavaScript:

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

替换页面后，

Turbolinks将触发page:change事件.该代码侦听page:change事件并调用JavaScript方法.该代码将起作用 即使在没有通过Turbolinks访问的页面上(例如，访问的第一页).

Turbolinks fires a page:change event when a page has been replaced. The code listens for the page:change event and calls JavaScript method. This code will work even on pages that are not visited through Turbolinks (for example, the first page visited).

我写了一本书，学习Ruby on Rails ，其中包括有关JavaScript的一章，并介绍了Turbolinks问题.

I've written a book, Learn Ruby on Rails, that includes a chapter on JavaScript and covers the Turbolinks issue.

这篇关于从页面导航到页面时JavaScript不执行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！