change event is not triggered when coming from browser back button

Question

I have this form on page:

$(document).ready(function() {
  $(document).on('change', '.multi-file-upload', function() {
    console.log("change triggered");
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<form enctype="multipart/form-data" action="/court_records/import" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="zljqBRnDYPeLyyNJi+BNeEqHsmtDVTBMoq3NO963Kq5I+p2YM9OMp2dCEN75w==">
  <input type="file" name="file" id="file" multiple="multiple" class="multi-file-upload">
  <input type="submit" name="commit" value="Submit">
</form>

When I load page, and add a file, the "change triggered" is called. But when I hit the submit button and then go to new page and then click back button and try to add a file again, the change is not triggered.

How can I get that change event to fire when the page is loaded from pressing a back button on browser?

Answer 1

I used a combination of 'pageshow' and replacing the file input field:

  $(window).on('pageshow', function(){
      $('.multi-file-upload').replaceWith($('.multi-file-upload').val('').clone(true));

      $(document).on('change','.multi-file-upload',function(){
          console.log("change triggered");
      })
  });