Rails，单击link_to helper后未加载javascript

Posted 2023-05-09

【中文标题】Rails，单击link_to helper后未加载javascript

【英文标题】：Rails, javascript not loading after clicking through link_to helper

【发布时间】：2013-07-10 02:54:42

【问题描述】：

当我在 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");
);

任何帮助将不胜感激。提前致谢！

【参考方案1】：

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

这个问题可能是由于新添加的Turbolinks gem。它使您的应用程序表现得像一个单页 JavaScript 应用程序。它有一些好处（it's faster），但不幸的是它破坏了一些现有的事件，如$(document).ready()，因为页面永远不会重新加载。这可以解释为什么 JavaScript 在您直接加载 URL 时有效，但在您通过 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 >5（您可以通过在控制台中运行 rails -v 进行检查）使用 'turbolinks:load' 而不是 'page:change'

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

【讨论】：

是的，这是 Rails 4。您发布的内容确实通过 link_to 点击修复了它。它也使它不适用于常规的手动 url 页面加载，有没有办法让它在不复制我的 js 代码的情况下通过这两种方法工作？谢谢！

嗯，这很奇怪。我认为这对双方都有效。最好的解决方案可能是使用链接的 jquery.turbolinks gem，因为它也可能处理这个问题。注意：我没有使用过，所以我不确定。看起来它重新绑定了'page:load' 以调用$(document).ready()，所以你可以照常做所有事情。

我编辑了我的答案以制定一个无需 jquery.turbolinks 的解决方案 :)

太棒了！它对我帮助很大！

编辑每个 js 文件中的所有代码，期望 document.ready 像往常一样工作，这对于任何大小和复杂性的应用程序都是不可行的。为什么有人会设计一些使 document.ready 不能像往常一样工作的东西，并将其称为功能？有没有办法告诉 turbolinks 不要破坏 document.ready - 或者是卸载它的唯一选择？

【参考方案2】：

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

这是我的样本：

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

【讨论】：

这是实施最快的解决方案。

这解决了link_to 的问题，但真正的问题是页面页脚中的内联<script> 标签。 （内联脚本标签对 turbolink 不好）。

最好的解决方案是删除 turbolinks，imo。用“变通方法”修复应该“正常工作”的东西是一个巨大的时间杀手。去年我本可以单独从 turbolinks-fixes 中休息一周。

这让我很开心！

快速修复的好答案，但要获得最佳解决方案，请参阅@RyanEndacott 的答案

【参考方案3】：

如果您使用的是 rails 5 而不是'page:change'，您应该像这样使用'turbolinks:load'：

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

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

【讨论】：

这个和 Ice-Blaze 的解决方案都对我有用。但我最喜欢这个，因为我不必更改所有链接。 （我正在使用 Rails 5）

【参考方案4】：

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

例子：

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

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

【参考方案5】：

确保您没有任何内联 <script> 标记。 （内联脚本标签不适合 turbolinks）。

【参考方案6】：

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

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

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

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

【讨论】：

赢家！ page:load 在刷新时对我不起作用；我推荐这个解决方案。

【参考方案7】：

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

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

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

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

【参考方案8】：

如果您的 link_to js 在重新加载后正常工作，那么这应该是一个 turbolink 问题，您可以在该 link_to 上使用 turbolink false，例如：

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