关于file标签change选择同一个文件不会触发问题

最新推荐文章于 2021-08-06 02:22:27 发布

#麻辣小龙虾#

最新推荐文章于 2021-08-06 02:22:27 发布

阅读量1.1k

点赞数 1

分类专栏： javascript html

本文链接：https://blog.csdn.net/CodingNoob/article/details/89916919

版权

javascript 同时被 2 个专栏收录

90 篇文章 1 订阅

订阅专栏

html

10 篇文章 0 订阅

订阅专栏

最近在项目开发的过程中遇到一个问题，就是需要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文档

#麻辣小龙虾#

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于file标签change选择同一个文件不会触发问题

最近在项目开发的过程中遇到一个问题，就是需要file标签选中后触发，但是有个问题，就是change选中之后如果选钟的是同一个文件，那么change事件就不会触发，不过最后还是找到了方法去解决这个问题。上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...
复制链接

扫一扫

专栏目录