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 wit

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
});