關於file標籤change選擇同一個文件不會觸發問題

最近在項目開發的過程中遇到一個問題,就是需要file標籤選中後觸發,但是有個問題,就是change選中之後如果選鐘的是同一個文件,那麼change事件就不會觸發,不過最後還是找到了方法去解決這個問題。

上代碼:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>關於file標籤change選擇同一個文件不會觸發問題</title>
  <script src="./jquery-1.11.1.js"></script>
</head>
<body>
  <input type="file" id="file" />
</body>
<script>
  $(function(){
    // 用on給動態生成的元素綁定事件,直接用普通的.click的方式是沒給動態元素綁定事件的
    $('body').on('change', '#file', function(){
      alert('觸發了change事件');
      $(this).replaceWith('<input type="file" id="' + $(this).attr('id') + '" />'); // 將現有的元素替換掉
    });
  });
</script>
</html>

原理很簡單,就是每次觸發之後都將元素動態更新替換回原來的元素,這樣file標籤元素永遠都是最新的,就都會觸發change事件,但是這裏有個問題,因爲動態生成的元素,所以綁定change事件的時候不能用常規的clcik的方式綁定這樣事件不會生效成功的。

好久都沒用jquey了,好多api都有點忘記了。。。。

jquery API文檔

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章