Javascript Rails 5：如何将$（document）.ready（）与turbo链接一起使用

Turbolinks防止正常的

$（document）.ready（）

事件在除初始加载之外的所有页面访问中触发，如前所述和。不过，链接答案中的任何解决方案都不适用于Rails 5。如何像以前的版本一样在每次页面访问时运行代码？

您需要为每次页面访问连接到TurboLink触发的事件，而不是侦听

ready

事件

不幸的是，Turbolinks 5（Rails 5中出现的版本）已被重新编写，并且没有使用与Turbolinks以前版本相同的事件名称，导致上述答案失败。现在起作用的是像这样聆听事件：

$( document ).on('turbolinks:load', function() {
  console.log("It works on each visit!")
})

使用轻质宝石

它使

$（document）.ready（）

在不更改现有代码的情况下使用TurboLink

或者，您可以将

$（document）.ready（）

更改为以下选项之一：

$(document).on('page:fetch', function() { /* your code here */ });

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

---

取决于哪一个更适合您的情况。

当我们等待修复这个非常酷的宝石时，我可以通过修改以下内容继续前进

  addCallback: (callback) ->
if $.turbo.isReady
  callback($)
$document.on 'turbo:ready', -> callback($)

致：

---

我还不知道这不能解决什么问题，但它在初始检查时似乎很有效。

以下是对我有效的解决方案：

安装

gem'jquery turbolinks'

将此.coffee文件添加到您的应用程序：

命名为turbolinks-compatibility.coffee

在application.js

//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require turbolinks
//= require turbolinks-compatibility

本地JS：

document.addEventListener("turbolinks:load", function() {
    console.log('It works on each visit!');
});

---

这是我的解决方案，覆盖

jQuery.fn.ready

，然后覆盖

$（文档）。ready

可以不做任何更改地工作：

jQuery.fn.ready = (fn)->
  $(this).on 'turbolinks:load', fn

（咖啡脚本）

我使用：

$（文档）。在“TurboLink:load”上->

而不是：

---

$（document）.on（'turbolinks:load'，function（）{…}）

在rails 5中，最简单的解决方案是使用：

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

而不是

$（文档）.ready

。工作起来很有魅力

纯现代js:

const onLoad = () => {
  alert("works")
}

document.addEventListener("load", onLoad)
document.addEventListener("turbolinks:load", onLoad)

---

---

jquery turbolinks还不支持turbolinks 5。你说得对，@AndrewH！希望很快就会增加支持。jquery turbolinks gem已被弃用。是的。这里也有解释。检查5.2页面更改事件。TurboLink：在本地为我加载Fire，但不在Heroku上加载。我在编译的js资产中看到了我的自定义javascript代码，但事件没有触发。不管Rail文档怎么说，我在（'ready turbolinks:load'）上使用了

，

，否则我在某些页面上遇到了一些问题。我也遇到了同样的问题，即需要在初始页面加载以及turbolinks:load时触发。我已经就此提出了一个问题，所以。你对为什么会这样有更多的见解吗？您是否正在使用jquery TurboLink（我是）。唯一的好处是它确保了你的代码是幂等的。这与rails 6不同吗？在

production

env中呢？你测试过了吗？有人告诉我，它在

开发

模式下可以正常工作。gem是不受欢迎的。我已经这样做了，我仍然收到这个问题，正如@inye所说的：。使用JS或Coffee并没有什么区别，至少对我来说没有。大家好，这个答案总体上有什么问题吗？我猜这是coffeescript而不是原生javascript？我给它一个+1，因为这正是我正在做的，而且它对我有效（在我的咖啡脚本文件中）是的！，这是给咖啡的脚本：）。我的错误是没有具体说明这正是我所需要的。这也适用于依赖

document

回调的外部库。为什么要投否决票？只要在整个应用程序中使用TurboLink，这应该是安全的，对吗？不要将

ready

添加到列表中，否则该功能将执行两次。如前所述，您应该这样做：

javascript$（document）.ready（function（）{$（document）.on（'turbolinks:load'，function（）{}}）

@XiaohuiZhang您确定这会起作用吗？？？？因为如果触发了

$（document）.ready

，那么至少在我自己的场景中，我不需要

turbolinks:load

@XiaohuiZhang如果你的脚本必须在有turbolinks的页面上工作，而在没有，因为它需要turbolinks:load事件来执行code@escanxr两者都可以，你可以试试。因为无论Turbolinks页面是否打开，Turbolinks都会触发“Turbolinks:load”事件。@XiaohuiZhang我试过Turbolinks 5，但没有成功。如果页面上禁用TurboLink，则仅触发

ready

事件。如果有turbolinks，代码会被调用两次

const onLoad = () => {
  alert("works")
}

document.addEventListener("load", onLoad)
document.addEventListener("turbolinks:load", onLoad)