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

要在按下“后退”按钮时执行Javascript，请使用pageshow，如下所示。

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

Answer 2

我结合使用了“ 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");
      })
  });

来自浏览器后退按钮时未触发更改事件

2 个答案: