Turbolinks load event not working on with page refresh

Question

Javascript code like this

document.addEventListener("turbolinks:load", function() {
  $("p#hide_if_js").hide();
});

is working fine with turbolinks when I click between pages or use the browser back button. However, when I refresh the page, the javascript code is not loaded. If I refresh a few times, nothing happens, but if I click a link to a different back and click back to the page, the javascript code is now loaded.

It looks like the turbolinks:load is working on most events, but not the page reload. The documentation says that it 'fires once on the initial page load and again after every Turbolinks visit'. What is going wrong?

I am using the jquery.turbolinks gem and the associated compatibility code.

Answer 1

With help from uzaif's comment, the following worked

  ready = ->
    if $('body').attr('data-loaded') == 'T'
      return
    # code goes here
    $('body').attr('data-loaded','T')
  $(document).ready(ready)
  $(document).on('turbolinks:load', ready)

The $('body').attr('data-loaded') lines are to prevent the code loading twice.

This approach is using event delegation, as recommended by the turbolinks instructions. It is not clear why it is still necessary to use the $(document).ready(ready) as the turbolink:load is meant to cover this.

Answer 2

You can use in this manner

document.addEventListener('load turbolinks:load',function() {
//Your code
});

equivalent coffee code

document.addEventListener 'load turbolinks:load', ->
  #Your code
  return

Answer 3

$(document).on('turbolinks:load', function() {
  // enter code here
});