Rails,通过link_to helper点击后没有加载javascript

IT技术 javascript jquery ruby-on-rails
2021-03-17 23:31:12

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

任何帮助将非常感激。提前致谢!

6个回答

你在使用 Rails 4 吗?(通过rails -v在你的控制台中找出

这个问题可能是由于新添加的Turbolinks gem。它使您的应用程序表现得像一个单页 JavaScript 应用程序。它有一些好处(它更快),但不幸的是它破坏了一些现有的事件,比如$(document).ready()因为页面永远不会重新加载。这将解释为什么当您直接加载 URL 时 JavaScript 可以工作,而当您通过link_to.

这是关于 TurbolinksRailsCast

有几个解决方案。您可以使用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); 
惊人的 !这对我帮助很大 !
2021-04-20 23:31:12
编辑每个 js 文件中的所有代码,期望 document.ready 像往常一样工作,对于任何规模和复杂性的应用程序来说都不是一种选择。为什么有人会设计一些使 document.ready 无法正常工作的东西,并将其称为功能?有没有办法告诉 turbolinks 不要破坏 document.ready - 或者是卸载它的唯一选择?
2021-04-28 23:31:12
是的,这是 Rails 4。您发布的内容确实通过 link_to 点击修复了它。这也使它无法在常规手动 url 页面加载上工作,有没有办法让它在不复制我的 js 代码的情况下通过这两种方法工作?谢谢!
2021-05-02 23:31:12
嗯,这很奇怪。我认为这对两者都有效。最好的解决方案可能是使用链接的 jquery.turbolinks gem,因为它可能也会处理。注意:我没有使用过它,所以我不确定。看起来它重新绑定'page:load'了调用$(document).ready(),所以你会像往常一样做一切。
2021-05-09 23:31:12
我编辑了我的答案以制作一个无需 jquery.turbolinks 即可工作的解决方案 :)
2021-05-13 23:31:12

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

有我的样本:

<%= link_to 'Edit', edit_interpreter_path(@interpreter), method: :get %>
这解决了这个问题,link_to但事实证明真正的问题是<script>页面页脚中的内联标签。(内联脚本标签对 turbolinks 不好)。
2021-04-18 23:31:12
这是实施速度最快的解决方案。
2021-04-27 23:31:12
最好的解决方案是删除 turbolinks,imo。用“变通方法”修复应该“正常工作”的东西是一个巨大的时间杀手。去年,我本可以单独从 turbolinks-fixes 中休息一周。
2021-05-03 23:31:12
这件事情让我感到很快乐 !
2021-05-05 23:31:12
快速修复的好答案,但对于最佳解决方案,请参阅@RyanEndacott 的答案
2021-05-15 23:31:12

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

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

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

这和 Ice-Blaze 的解决方案都对我有用。但我最喜欢这个,因为我不必更改所有链接。(我正在使用 Rails 5)
2021-04-16 23:31:12

您还可以使用指定 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 不好)。