Javascript DOM events before and after Turbolinks cache

Question

Here I have:

$(document).on 'turbolinks:load', ->
  console.log "page has loaded!"
  $ ->
    $("button#show-hide").click (e) ->
      e.preventDefault()

which makes my click event available only after Turbolinks caches page. I can do $(document).on 'turbolinks:before-visit which will make event available only before Turbolinks caches. How should I make event available at all times?

Answer 1

I think the problem here is that you are binding to two events: turbolinks:load and $(document).ready().

Turbolinks does not discard event listeners on the document so you can safely bind click handlers to it and they will be called scross page loads. From the Turbolinks documentation:

When possible, avoid using the turbolinks:load event to add event listeners directly to elements on the page body. Instead, consider using event delegation to register event listeners once on document or window.

With this in mind, you can do:

$(document).on 'click', "button#show-hide", (e) ->
  e.preventDefault()