所以我有一个具有以下结构的页面
<div class="editCampaignBanner">
<div>
<hr>
<label for="file">Upload a new image</label>
<input id="file" type="file" name="file" class="valid">
<label for="NewImageURLs">Link URL (Optional)</label>
<input id="NewImageURLs" type="text" value="" name="NewImageURLs">
<hr>
</div>
</div>
我已经写了一些jquery:
$('div.editCampaignBanner input:file').on('change', function () {
var value = $(this).val();
var div = $(this).parent();
var html = '<div>'+ div.html() + '</div>';
if (value.length > 0) {
div.after(html);
}
else if ($(this) > 1) {
div.remove();
}
});
因此,当我在文件中输入一个元素时,它会在前一个元素下生成一个 div:
<div class="editCampaignBanner">
<div>
<hr>
<label for="file">Upload a new image</label>
<input id="file" type="file" name="file" class="valid">
<label for="NewImageURLs">Link URL (Optional)</label>
<input id="NewImageURLs" type="text" value="" name="NewImageURLs">
<hr>
</div>
<div>
<hr>
<label for="file">Upload a new image</label>
<input id="file" type="file" name="file" class="valid">
<label for="NewImageURLs">Link URL (Optional)</label>
<input id="NewImageURLs" type="text" value="" name="NewImageURLs">
<hr>
</div>
</div>
但是现在,尽管使用 .on()
注册了事件,但 div 中的第二个文件输入不会触发该事件。我错过了什么?
最佳答案
替换
$('div.editCampaignBanner input:file').on('change', function () {
由
$('div.editCampaignBanner').on('change', 'input:file', function () {
关于Jquery .on ('change' ) 不会触发动态添加的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12950201/