turbolinks:load event not firing on remote true call, rails, jquery

Question

I have a simple js file in app/assets/javascripts/media_preview_script.js

$(document).on('turbolinks:load', function() {
  $("#cat").on('click', function() {
    showBrowseInput()
  })
})
function showBrowseInput () {
  do stuff here
}

Supposedly turbolinks:load makes this script attach on first page load and then any turbolinks call after that, but it will not do so. It only loads when the page loads then any remote: true call that comes back events are not attached. This is the same with any script I have in my app.

This is happening because of the $(document).on('turbolinks:load'... at the beginning, when I remove this and if I include the file in the view form with <%= javascript_include_tag "file_name" %> I do not get double attachment on document and the events will attach every js call or page load. So my question is, does javascript_include_tag add in a turbolinks function? Or can anyone tel me what is going on here. I am using rails 5.

layouts/application.html.erb

<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

javascipt include tag api doc here and layouts and rendering here

Answer 1

I think the problem is that remote: true makes it all work with ajax. You can handle the events you want with this code:

$('form').ajaxError(function(event, request, settings) {
  // your code
})

$('form').bind('ajax:success', function(evt, data, status, xhr){
  // your code
})

as stated in https://stackoverflow.com/a/8956770/2162591

UPDATE:

The only problem I got with this solution is that ajax:success is triggered before the page fully refreshed. I used this code instead:

$('form').bind('turbolinks:request-end', function(evt, data, status, xhr){
    // your code
});