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

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

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:load event like so:

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

Use the light-weight gem jquery-turbolinks.

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

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

$(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.

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

  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.

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
   

Native JS :

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

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

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

(For coffeescript)

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

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

In rails 5 the easiest solution is to use:

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

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

pure modern js:

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


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

with turbo it's turbo:load