jquery 3 document ready is blocking turbolinks from executing

Question

I was using jQuery 1.12.4 so far and everything was ok, I had something like this :

$(document).ready ->

    console.log "document is ready yaay!"

    start = ->

        alert "Hello world!!!"

    document.addEventListener('turbolinks:load', start)

I upgraded to Rails 5.1 yesterday and decided to add and upgrade my jQuery as well (yep I still need it) so I installed jQuery 3 using yarn, but the same code above doesn't get executed, at least the turbolinks part (the console.log is executed every time the document get loaded but the "start" method does not)

I removed the $(document).ready -> and the code start working as expected !!!

To make sure I also removed jQuery 3 and installed jQuery 1.12 back and it worked! even with $(document).ready ->

Why this is happening ?

Answer 1

Make sure that you add //= require jquery to your application.js file.

In the command line, run yarn install jquery all lower case

Here is my application.js file from one of my project using jquery through yarn.

//= require rails-ujs
//= require turbolinks
//= require jquery
//= require_tree .

EDIT: If you want console.log and alert to fire at every page change. You can write your javascript like this.

$(document).on('turbolinks:load', function() {
  console.log('Test');
  alert("Hello world!!!");
});