动态添加的input file change事件不生效？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
.img{
width:100px;
height:100px;
border:1px solid blue;
}
.big{
border:1px solid red;
}
img{
width:100px;
height:100px;
}
</style>
</head>
<body>
<div class="big">
<div class="wrap">
<input type="file">
<div class="img"></div>
</div>
</div>
<script src="jquery/dist/jquery.min.js"></script>
<script>
$('input').on('change',function(){
var str='';
str+='<input type="file"/>';
str+='<div class="img"></div>';
$('.big').append(str);
var file=this.files[0];
console.log($(this).parent().children('.img'));
readFile(file,$(this).parent().children('.img'));
})
function readFile(file,element){
// 新建阅读器
var reader = new FileReader();
// 根据文件类型选择阅读方式
switch (file.type){
case 'image/jpg':
case 'image/png':
case 'image/jpeg':
case 'image/gif':
// FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL
reader.readAsDataURL(file);
break;
}
// 当文件阅读结束后执行的方法
reader.addEventListener('load',function () {
// 如果说让读取的文件显示的话 还是需要通过文件的类型创建不同的标签
switch (file.type){
case 'image/jpg':
case 'image/png':
case 'image/jpeg':
case 'image/gif':
var img = document.createElement('img');
img.src = reader.result;
// element.append(img);
element.append(img);
element.show();
break;
}
});
}
</script>
</body>
</html>
html中的input file change 执行，但是动态添加的input change不执行
str+='';
改成
str+='';
方案一： 生成节点后，重新给input 绑定事件，这样会导致前面绑定过的事件会绑定两次（点击一次等于执行两次事件）。解决方案在绑定事件前
先移除事件。JQ off()
方案二：在生成节点时绑定事件
方案一代码变动最小
亲，一开始你给所有的input标签增加了Change事件，当所有input增加完Change事件后，你又重新增加了一个Input到页面上去，JQuery不会智能的给你加上Change事件！ 你增加完毕后，要手动的去给新增加的Input控件增加Change事件。。。
$('input').on('change', function () {
======>
$('.big').on('change','input', function () {