通过 link_to helper 单击后没有加载 javascript

我在 Rails 中使用 link _ to helper 时，在加载 javascript 时遇到了一些麻烦。当我用‘ localhost: 3000/products/new’手动输入 url 或者重新加载页面时，javascript 会加载，但是当我通过下面所写的链接时，jQuery $(document).ready不会加载到新页面上。

当我点击这个链接时，javascript 不会加载:

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

Js 文件

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

任何帮助都将不胜感激。预先感谢！

34525 次浏览
小开
最佳答案

你正在使用 Rails 4吗? (通过在控制台中执行 rails -v来找出答案)

这个问题可能是由于新添加的 涡轮连接 gem 造成的。它使您的应用程序的行为类似于单页 JavaScript 应用程序。它有一些好处(更快) ，但不幸的是，它破坏了一些现有的事件，如 $(document).ready()，因为页面从来没有重新加载。这就解释了为什么 JavaScript 在直接加载 URL 时可以工作，而在通过 link_to导航到 URL 时却不能工作。

这是一个关于涡轮链接的 RailsCast。

有几个解决办法。你可以使用 Jquery.turbolinks作为一个插件修复，或者你可以切换你的 $(document).ready()语句来代替使用 Turbolinks 'page:change'事件:

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

或者，你也可以这样做，以便与常规页面加载以及 Turbolinks 兼容:

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


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

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

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

我也遇到了同样的问题，但是 Jquery.turbolinks没有帮助。我注意到我必须重写 GET 方法。

这就是我的例子:

<%= link_to 'Edit', edit_interpreter_path(@interpreter), method: :get %>
小开

还可以用指定 data-no-turbolink 的 div 包装链接。

例如:

<div id="some-div" data-no-turbolink>
<a href="/">Home (without Turbolinks)</a>
</div>

资料来源: https://github.com/rails/turbolinks

小开

请确保您没有任何内联 <script>标记。(内联脚本标记不适用于 turbolinks)。

小开

FWIW，从 涡轮链接文档开始，更适合捕获的事件是 page:change，而不是 $(document).ready。

page:load有一个警告，它不会在缓存重载时触发..。

一个新的 body 元素已经加载到 DOM 中。不会在部分替换或从缓存还原页时触发，以免在同一主体上触发两次。

由于 Turbolinks 只是切换视图，因此 page:change更为合适。

小开

如果你在轨道5而不是 'page:change'上，你应该这样使用 'turbolinks:load':

$(document).on('turbolinks:load', function() {
// Should be called at each visit
})

资料来源: https://stackoverflow.com/a/36110790

小开

解决我的问题的解决方案是添加这个元属性。

<meta name="turbolinks-visit-control" content="reload">

这样可以确保对某个页面的访问总是会触发完全重新加载。

这对于解决我在 https://github.com/turbolinks/turbolinks#reloading-when-assets-change中遇到的问题非常有用。

小开

如果你的 link _ to js 在重新加载后仍然工作，所以它应该是一个 turbolink 问题，你可以在这个 link _ to like for ex 上使用 turbolink false:

<%= link_to "Home", home_path, data: { turbolinks: false } %>

提交答案