jquery问题=>更改不适用于附加

Question

我的jQuery代码有问题html追加：

      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（）{}）时，它不起作用，我无法解决此问题，任何帮助都将是一件好事！

jQuery函数：

    $('.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);
}); 

Answer 2

使用#images而不是.image-upload

$('#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);
    }); 

var image_row=1
var 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);



$('#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);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="images">
<tbody></tbody>

</table>