javascript - 单击link_to帮助器后，Rails，JavaScript无法加载(Rails, javascript not loading after clicking through link_to helper)

Question

I'm having some trouble loading my javascript when I use a link_to helper in rails.

(当我在rails中使用link_to帮助器时，加载JavaScript时遇到了一些麻烦。)

When I either manually enter the url with 'localhost:3000/products/new' or reload the page, the javascript loads, but when I go through a link as written below, the jQuery $(document).ready will not load on the new page.

(当我用'localhost：3000 / products / new'手动输入url或重新加载页面时，将加载javascript，但是当我通过下面编写的链接时，jQuery $(document).ready将不会加载到新一页。)

Link_to, javascript does not load when I click this link:

(Link_to，当我单击此链接时，javascript无法加载：)

<%= link_to "New Product", new_product_path %>

products.js file

(products.js文件)

$(document).ready(function() {
    alert("test");
});

Any help would be much appreciated.

(任何帮助将非常感激。)

Thanks in advance!

(提前致谢！)

  ask by StickMaNX translate from so

Answer 1

Are you using Rails 4?

(您在使用Rails 4吗？)

(Find out by doing rails -v in your console)

(（通过在控制台中使用rails -v来查找）)

This issue is probably due to the newly added Turbolinks gem.

(此问题可能是由于新添加的Turbolinks gem。)

It makes your application behave like a single page JavaScript application.

(它使您的应用程序的行为类似于单页JavaScript应用程序。)

It has a few benefits ( it's faster ), but it unfortunately breaks some existing events like $(document).ready() because the page is never reloaded.

(它有一些好处（ 速度更快 ），但不幸的是，由于从未重新加载页面，它破坏了一些现有事件，例如$(document).ready() 。)

That would explain why the JavaScript works when you directly load the URL, but not when you navigate to it through a link_to .

(这可以解释为什么当您直接加载URL而不是通过link_to导航到JavaScript时JavaScript可以工作的原因。)

Here's a RailsCast about Turbolinks.

(这是有关Turbolinks的RailsCast 。)

There are a couple solutions.

(有几种解决方案。)

You can use jquery.turbolinks as a drop-in fix, or you can switch your $(document).ready() statement to instead use the Turbolinks 'page:change' event:

(您可以使用jquery.turbolinks作为嵌入式修复程序，也可以切换$(document).ready()语句以使用Turbolinks'page 'page:change'事件：)

$(document).on('page:change', function() {
    // your stuff here
});

Alternatively, you could do something like this for compatibility with regular page loads as well as Turbolinks:

(另外，您可以执行以下操作以与常规页面加载以及Turbolink兼容：)

var ready = function() {
    // do stuff here.
};

$(document).ready(ready);
$(document).on('page:change', ready);

If you are using Ruby on Rails >5 (you can check by running rails -v in the console) use 'turbolinks:load' instead of 'page:change'

(如果您使用的是Ruby on Rails> 5（可以通过在控制台中运行rails -v进行检查），请使用'turbolinks:load'而不是'page:change')

$(document).on('turbolinks:load', ready);