最近在項目開發的過程中遇到一個問題,就是需要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都有點忘記了。。。。