jQuery Rails，通过link_to helper点击后没有加载javascript
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17600093/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rails, javascript not loading after clicking through link_to helper
提问by StickMaNX
I'm having some trouble loading my javascript when I use a link_to helper in rails. 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).readywill not load on the new page.
当我在 Rails 中使用 link_to 帮助程序时，我在加载 javascript 时遇到了一些问题。当我手动输入带有 '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!
任何帮助将非常感激。提前致谢！
回答by Ryan Endacott
Are you using Rails 4? (Find out by doing rails -vin your console)
你在使用 Rails 4 吗？（通过rails -v在您的控制台中执行来查找）
This issue is probably due to the newly added Turbolinksgem. It makes your application behave like a single page JavaScript application. It has a few benefits (it's faster), but it unfortunately breaks some existing events like $(document).ready()because the page is never reloaded. That would explain why the JavaScript works when you directly load the URL, but not when you navigate to it through a link_to.
这个问题可能是由于新添加的Turbolinksgem。它使您的应用程序表现得像一个单页 JavaScript 应用程序。它有一些好处（它更快），但不幸的是它破坏了一些现有的事件，比如$(document).ready()因为页面永远不会重新加载。这将解释为什么当您直接加载 URL 时 JavaScript 可以工作，而当您通过link_to.
Here's a RailsCastabout Turbolinks.
这是关于 Turbolinks的RailsCast。
There are a couple solutions. You can use jquery.turbolinksas 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: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:
或者，为了与常规页面加载和 Turbolinks 兼容，您可以执行以下操作：
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 -vin the console) use 'turbolinks:load'instead of 'page:change'
如果您使用 Ruby on Rails >5（您可以通过rails -v在控制台中运行来检查）使用'turbolinks:load'而不是'page:change'
$(document).on('turbolinks:load', ready);
回答by Ice-Blaze
I got the same probleme but jquery.turbolinksdoesn't helped. I noticed that I have to override the GET method.
我遇到了同样的问题，但jquery.turbolinks没有帮助。我注意到我必须覆盖 GET 方法。
There is my sample :
有我的样本：
<%= link_to 'Edit', edit_interpreter_path(@interpreter), method: :get %>
回答by user000001
If you are on rails 5 instead of 'page:change'you should use 'turbolinks:load'like this:
如果你在 rails 5 而不是'page:change'你应该这样使用'turbolinks:load'：
$(document).on('turbolinks:load', function() {
// Should be called at each visit
})
回答by equn
You can also wrap your link with a div that specifies data-no-turbolink.
您还可以使用指定 data-no-turbolink 的 div 包装您的链接。
Example:
例子：
<div id="some-div" data-no-turbolink>
<a href="/">Home (without Turbolinks)</a>
</div>
回答by poorman
Make sure you don't have any inline <script>tags. (Inline script tags are bad with turbolinks).
确保您没有任何内联<script>标签。（内联脚本标签对 turbolinks 不好）。
回答by pyepye
FWIW, from the Turbolinks docs, the more appropriate event to capture instead of the $(document).readyis page:change.
FWIW，从Turbolinks文档，比较合适的事件捕捉，而不是$(document).ready为page:change。
page:loadhas a caveat that it doesn't fire on cache reloads...
page:load有一个警告，它不会在缓存重新加载时触发......
A new body element has been loaded into the DOM. Does not fire on partial replacement or when a page is restored from cache, so as not to fire twice on the same body.
一个新的 body 元素已加载到 DOM 中。不会在部分替换或从缓存中恢复页面时触发，以免在同一主体上触发两次。
And since Turbolinks is just switching the view, page:changeis more appropriate.
而且由于Turbolinks只是切换视图，page:change比较合适。
回答by Rockwell Rice
The solution that solved my issue was adding this meta property.
解决我的问题的解决方案是添加这个元属性。
<meta name="turbolinks-visit-control" content="reload">
This ensures visits to a certain page will always trigger a full reload.
这确保对某个页面的访问将始终触发完全重新加载。
This was incredibly useful for working on a solution to solve the issue I was having with this, https://github.com/turbolinks/turbolinks#reloading-when-assets-change.
这对于解决我遇到的问题的解决方案非常有用，https://github.com/turbolinks/turbolinks#reloading-when-assets-change。
