Javascript 图像不显示在动态生成的内容上

我正在通过动态生成输入字段和图像元素一次上传多个图像。但是，我的代码不会在动态生成的image元素上显示图像

添加图像

$（文档）.ready（函数（）{
var max_image=10；
var计数=1；
$（'.add image'）。单击（函数（e）{
e、 预防默认值（）；
如果（计数<最大图像）{
计数++；
$（'.images'）。追加（`
`);
$（文档）.on（'change'，'#file'+count，function（）{
readURL（this）；
});
函数readURL（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（'#image'+count）.attr（'src'，e.target.result）；
}
reader.readAsDataURL（input.files[0]）；
}
}
}否则{
警报（“最多允许10张图像”）；
}
});
$（'.images'）。在（“.click”、“.delete”上，函数（e）{
e、 预防默认值（）；
$（this.parent（'div'）.remove（）；
y--；
})
});

可以只使用一个事件处理程序，而不是让所有文件都使用事件处理程序，然后在

readURL

函数中使用

.closest（'div'）。查找（'img'）

将src添加到图像标记中

演示代码：

$（文档）.ready（函数（）{
//允许的最大输入字段数
var max_image=10；
//初始化textbox的计数器
var计数=1；
//处理“添加更多”按钮上的单击事件
$（'.add image'）。单击（函数（e）{
e、 预防默认值（）；
如果（计数<最大图像）{
count++；//递增计数器
//验证条件
$（'.images'）。追加(`
`)；//添加输入字段
}否则{
警报（“最多允许10张图像”）；
}
});
//处理删除链接的单击事件
$（'.images'）。在（“.click”、“.delete”上，函数（e）{
e、 预防默认值（）；
$（this）.parent（'div'）.remove（）；//删除输入字段
y--；//减小计数器的值
})
//把这个放在外面。。
$（文档）.on（'change'，'.images输入[type=file]'，函数（）{
readURL（this）；
});
函数readURL（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
//获取最近的div，然后在那里找到img add img
$（输入）。最近（'div'）。查找（'img'）。属性（'src'，e.target.result）；
}
reader.readAsDataURL（input.files[0]）；
}
}
});

添加图像



这里有几个问题需要解决


不要嵌套事件处理程序
将CSS规则放在外部样式表中，而不是在HTML中内联
您没有使用正确的语法将
count
值附加到模板文本
除上述内容外，不要使用增量
id
属性。按类对具有常见行为的元素进行分组，并将单个事件处理程序附加到所有元素。这是您应该对正在使用的委托事件处理程序执行的操作

后一点可以解决您的问题，因为它将允许您针对单击的
img
，并将其特定的
src
属性更新为所选文件的内容


$（文档）.ready（函数（）{
var max_image=10；
$（document）.on（'change'，'.fileup'，function（）{
readURL（this，$（this.next（'img'））；
});
函数readURL（输入，$target）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$target.attr（'src'，e.target.result）；
}
reader.readAsDataURL（input.files[0]）；
}
}
$（'.add image'）。单击（函数（e）{
e、 预防默认值（）；
if（$（'div.input'）。长度<最大图像）{
$（'.images'）。追加(`
添加图像



不确定您的代码是关于什么的，但文件不会返回图像，这可能会有帮助：