除非刷新，否则JavaScript不会加载

Question

I've got some jquery in $(document).ready() , but this jquery code doesn't run on my page unless I refresh the page. Then it works on every subsequent refresh. Why is this the case?

I'm just putting in javascript and html tags but I'm working in a rails app, not sure if that complicates things.

Answer 1

Depending on your turbolinks version, you have to use the right syntax to override document load event. For turbolinks 5:

instead of

$(document). ready(function () {
....
})

Use

var documentready = function(){

}
$(document). on('turbolinks:load',  documentready); 

This will gracefully fall back to document ready event when refreshing.

Why is this necessary?

Turbolinks binds location changes (like clicking links) and uses Ajax to load the partial. The document IS NOT LOADED. Also, it manipulates browser's history to record the visit.

So, the assets are not loaded on each visit. Fast. That's why document ready won't bind on all events, unless all listeners are targeted under body or document (eg $("body").on("click","selector",function()... instead of $("selector").on('click', function()...

Answer 2

This problem occurs because some of the key events in older version of turbolinks is not compatible with the new turbolinks 5.

I suggested download the gem jquery-turbolinks make sure to require to application.js

//= require jquery
//= require jquery.turbolinks
......

and the compatibility script .You can find the script here just create a compatibility.coffee under assets/javascripts

This will let you use the old syntax. $(document).ready...