Javascript Rails 5：如何将 $(document).ready() 与 turbo-links 一起使用

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

提问by AndrewH

Turbolinks prevents normal $(document).ready()events from firing on all page visits besides the initial load, as discussed hereand here. None of the solutions in the linked answers work with Rails 5, though. How can I run code on each page visit like in prior versions?

Turbolinks 可防止$(document).ready()在初始加载之外的所有页面访问时触发正常事件，如此处和此处所述。但是，链接答案中的所有解决方案都不适用于 Rails 5。如何像以前的版本一样在每次访问页面时运行代码？

回答by AndrewH

Rather than listen to the readyevent, you need to hook in to an event fired by Turbolinks for every page visit.

ready您不需要监听事件，而是需要在每次页面访问时连接到 Turbolinks 触发的事件。

Unfortunately, Turbolinks 5 (which is the version that appears in Rails 5) has been re-written, and does not use the same event names as in previous versions of Turbolinks, causing the answers mentioned to fail. What works now is to listen to the turbolinks:loadevent like so:

不幸的是，Turbolinks 5（这是出现在 Rails 5 中的版本）已经被重写，并且没有使用与之前版本的 Turbolinks 相同的事件名称，导致提到的答案失败。现在有效的是监听turbolinks:load事件，如下所示：

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

回答by user464622

Native JS :

原生JS：

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

回答by Milad.Nozari

In rails 5 the easiest solution is to use:

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

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

Instead of $(document).ready. Works like a charm.

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

回答by Xiaohui Zhang

This is my solution, override jQuery.fn.ready, then $(document).readyworks without any change:

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

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

回答by ChaosPredictor

Here is solution that work for me, from here:

这是对我有用的解决方案，从这里开始：

1. install gem 'jquery-turbolinks'

2. add this .coffee file to your app: https://github.com/turbolinks/turbolinks/blob/master/src/turbolinks/compatibility.coffee

3. name it turbolinks-compatibility.coffee

4. at application.js

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

1. 安装 gem 'jquery-turbolinks'

2. 将此 .coffee 文件添加到您的应用程序：https: //github.com/turbolinks/turbolinks/blob/master/src/turbolinks/compatibility.coffee

3. 将其命名为 turbolinks-compatibility.coffee

4. 在 application.js

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

回答by fcabanasm

(For coffeescript)

（对于咖啡脚本）

I Use: $(document).on 'turbolinks:load', ->

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

Instead of: $(document).on('turbolinks:load', function() {...})

代替： $(document).on('turbolinks:load', function() {...})

回答by Jason Ihaia

While we await the fix to this really cool gem, I was able to move forward by modifying the following;

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

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

to:

到：

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

I'm not yet aware what this does not resolve, but it seemed to work well on initial inspection.

我还不知道这不能解决什么问题，但它似乎在初步检查中运作良好。

回答by Vadim

Use the light-weight gem jquery-turbolinks.

使用轻量级 gem jquery-turbolinks。

It makes $(document).ready()work with Turbolinks without changing existing code.

它可以$(document).ready()在不更改现有代码的情况下使用 Turbolinks。

Alternatively, you could change $(document).ready()to one of:

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

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

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

depending on which one is more appropriate in your situation.

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