j查询问题 => 更改不适用于追加

Question

我的jquery代码有问题 网页附加 ：

html = '<tr id="image-row' + image_row + '">';
html += '  <td class="text-left image-upload"><a href="" id="thumb-image' + image_row + '"data-toggle="image" class="img-thumbnail"><img src="{{ placeholder }}" alt="" title="" data-placeholder="{{ placeholder }}" /></a><input type="file" class="uploadImage" name="product_image[' + image_row + '][image]" value="" id="input-image' + image_row + '" /></td>';
html += '  <td class="text-right"><input type="text" name="product_image[' + image_row + '][sort_order]" value="" placeholder="{{ entry_sort_order }}" class="form-control" /></td>';
html += '  <td class="text-left"><button type="button" onclick="$('#image-row' + image_row + '').remove();" data-toggle="tooltip" title="{{ button_remove }}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
html += '</tr>';
$('#images tbody').append(html);

问题是当附加此行并使用ON('CLICK'，'.class'，function(({}(它不起作用，我无法解决这个问题，任何帮助都会很好！

J查询功能：

$('.image-upload').on('change', '.uploadImage',function(e){
console.log('run change img');
const thisFile = this.files[0];
var reader = new FileReader();
var img = $(this).parent().find('img');
reader.onload = function(e){
console.log(reader);
img.attr('src', this.result);
};
reader.readAsDataURL(thisFile);
}); 

Answer 1

使用事件委派时，将处理程序绑定到的元素必须是静态元素，而不是动态添加的元素。由于您是动态添加.image-upload，因此无法将委托事件绑定到该事件。它需要是一个静态容器元素。由于您将这些附加到#images，因此您应该使用它。

$('#images').on('change', '.uploadImage',function(e){
console.log('run change img');
const thisFile = this.files[0];
var reader = new FileReader();
var img = $(this).parent().find('img');
reader.onload = function(e){
console.log(reader);
img.attr('src', this.result);
};
reader.readAsDataURL(thisFile);
});