Событие change не вызывается при переходе из браузера назад.

Question

У меня есть эта форма на странице:

$(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>

Когда я загружаю страницу и добавляю файл, вызывается «инициированное изменение».Но когда я нажимаю кнопку «Отправить», а затем перехожу на новую страницу, затем нажимаю кнопку «Назад» и снова пытаюсь добавить файл, изменение не срабатывает.

Как получить событие изменения, чтобы оно срабатывало, когда страницазагружается от нажатия кнопки "Назад" в браузере?

Answer 1

Я использовал комбинацию 'pageshow' и заменил поле ввода файла:

  $(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");
      })
  });

Answer 2

Чтобы выполнить Javascript при нажатии кнопки «Назад», используйте pageshow, как показано ниже.

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