Question

当我在rails中使用link_to帮助程序时，我在加载我的javascript时遇到了一些问题。当我手动输入带有'localhost：3000 / products / new'的url或重新加载页面时，javascript会加载，但是当我通过下面所写的链接时，jQuery $(document).ready将不会加载到新的页。

Link_to，点击此链接时无法加载javascript：

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

products.js文件

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

非常感谢任何帮助。提前谢谢！

Answer 1

您使用的是Rails 4吗？（通过在控制台中执行rails -v查找）

此问题可能是由于新添加的Turbolinks gem。它使您的应用程序的行为类似于单页JavaScript应用程序。它有一些好处（it's faster），但遗憾的是它会破坏一些现有的事件，例如$(document).ready()，因为页面永远不会重新加载。这可以解释为什么JavaScript在您直接加载网址时有效，但在您通过link_to导航时却无效。

这里有关于Turbolinks的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＆gt; 5（您可以通过在控制台中运行rails -v进行检查），请使用'turbolinks:load'代替'page:change'

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

Answer 2

我遇到了同样的问题，但jquery.turbolinks没有帮助。我注意到我必须覆盖GET方法。

有我的样本：

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

Answer 3

如果您使用的是导轨5而不是'page:change'，则应使用'turbolinks:load'，如下所示：

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

来源：https://stackoverflow.com/a/36110790

Answer 4

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

示例：

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

来源：https://github.com/rails/turbolinks

Answer 5

确保您没有任何内嵌<script>标记。（使用turbolinks内联脚本标签很糟糕。）

Answer 6

FWIW，来自Turbolinks docs，要捕获的更合适的事件而不是$(document).ready是page:change。

page:load有一个警告，它不会触发缓存重新加载......

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

由于Turbolinks只是转换视图，page:change更合适。

Answer 7

解决我问题的解决方案是添加此meta属性。

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

这可确保访问特定页面将始终触发完全重新加载。

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

Rails，点击通过link_to帮助后javascript没有加载

7 个答案: