Rails 5: 如何使用 $(document).ready() 和 turbo-links

Question

Turbolinks 会阻止正常 $(document).ready() 事件在除初始加载之外的所有页面访问时触发，如前所述 here and here。不过，链接答案中的 None 解决方案适用于 Rails 5。我如何运行像以前的版本一样在每次访问页面时编写代码？

Answer 1

与其监听 ready 事件，您需要为每次页面访问连接到 Turbolinks 触发的事件。

不幸的是，Turbolinks 5（即 Rails5 中出现的版本）已被重写，并且不使用与以前版本的 Turbolinks 相同的事件名称，导致提到的答案失败。现在有效的是像这样收听 turbolinks:load 事件：

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

Answer 2

使用轻量级 gem jquery-turbolinks.

它使 $(document).ready() 在不更改现有代码的情况下与 Turbolinks 一起工作。

或者，您可以将 $(document).ready() 更改为以下之一：

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

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

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

Answer 3

虽然我们等待修复这个非常酷的 gem，但我能够通过修改以下内容继续前进；

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

至：

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

我还不知道这不能解决什么问题，但初步检查时似乎效果很好。

Answer 4

这是对我有用的解决方案，来自 here:

安装gem 'jquery-turbolinks'
将此 .coffee 文件添加到您的应用程序：https://github.com/turbolinks/turbolinks/blob/master/src/turbolinks/compatibility.coffee
将其命名为 turbolinks-compatibility.coffee

在application.js

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

Answer 5

原生 JS：

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

Answer 6

这是我的解决方案，覆盖 jQuery.fn.ready，然后 $(document).ready 无需任何更改即可工作：

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

Answer 7

（对于咖啡脚本）

我使用： $(document).on 'turbolinks:load', ->

而不是： $(document).on('turbolinks:load', function() {...})

Answer 8

在 rails5 中最简单的解决方案是使用：

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

而不是 $(document).ready。奇迹般有效。

Answer 9

纯现代 js：

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

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

使用 turbo 时 turbo:load

Rails 5: how to use $(document).ready() with turbo-links