With Turbolinks pages will change without a full reload, so you can't rely on DOMContentLoaded or jQuery.ready() to trigger your code. Instead Turbolinks fires events on document to provide hooks into the lifecycle of the page.
But I found DOMContentLoaded event is actually triggered when javascript is placed at the bottom of body tag, so for example, DOMContentLoaded will be triggered if I switch between pages using the following layout:
<!DOCTYPE html> <html> <head> <title>Turbolinks</title> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> </head> <body> <div id="container"> <%= yield %> </div> <%= javascript_include_tag 'application' %> </body> </html>
However, the DOMContentLoaded won't be triggered if javascript is placed in head tag. I read the source code of Turobolinks gem but I still don't understand why. Thanks!