Javascript querySelectorAll无法识别使用Append添加的项

我正在动态地（jqueryappend）将图像添加到div中，但是动态添加的图像不会被我的querySelectorAll识别

添加图像：

   $('#images').append('<div class="col-lg-2 col-md-3 col-xs-4 thumb"><img draggable="true" class="img-thumbnail" src="'+val.path+'"alt="Another alt text" width="300"><button type="button" class="btn btn-sm btn-danger imagedel" data-id="'+val.id+'"><i class="fas fa-times"></i></button></div>');

    var images = document.querySelectorAll('.img-thumbnail');

$.getJSON('/api/getimages', null, function(e){
  //$('#images').empty();
  $.each(e.images, function(key, val){
    $('#images').append('<div class="col-lg-2 col-md-3 col-xs-4 thumb"><img draggable="true" class="img-thumbnail" src="'+val.path+'"alt="Another alt text" width="300"><button type="button" class="btn btn-sm btn-danger imagedel" data-id="'+val.id+'"><i class="fas fa-times"></i></button></div>');
  });
});

function dragAndDropSupported () {
    return 'draggable' in document.createElement('span');
}

function handleDragStart(e) {
    [].forEach.call(images, function (img) {
        img.classList.remove('img_dragging');
    });
    this.classList.add('img_dragging');
}

function handleDragOver(e) {
    if (e.preventDefault) {
        e.preventDefault();
    }

    e.dataTransfer.dropEffect = 'copy'; 

    return false;
}

function handleDragEnter(e) {
    this.classList.add('over');
}

function handleDragLeave(e) {
    this.classList.remove('over'); 
}

function handleDrop(e) {
    e.preventDefault();

    console.log(document.querySelector('#images img.img_dragging'));

    var img = document.querySelector('#images .img_dragging');
    var _canvasWidth = document.getElementById("canvas-container").clientWidth;
    var _canvasHeight = document.getElementById("canvas-container").clientHeight;
    var _scale = 1;

    if (img.width > img.height && img.width > (_canvasWidth-200) ){ _scale = (_canvasWidth-200)/img.width; }
    if (img.height > img.width && img.height > (_canvasHeight-200) ){ _scale = (_canvasHeight-200)/img.height;}

    var newImage = new fabric.Image(img, {
        scaleY: _scale/4,
        scaleX: _scale/4,
        left: e.layerX,
        top: e.layerY
    });
    canvas.add(newImage);

    return false;
}

function handleDragEnd(e) {
    [].forEach.call(images, function (img) {
        img.classList.remove('img_dragging');
    });
}

if (dragAndDropSupported() === true) {
    var images = document.querySelectorAll('.img-thumbnail');
    [].forEach.call(images, function (img) {
        img.addEventListener('dragstart', handleDragStart, false);
        img.addEventListener('dragend', handleDragEnd, false);
    });

    var canvasContainer = document.getElementById('canvas-container');
    canvasContainer.addEventListener('dragenter', handleDragEnter, false);
    canvasContainer.addEventListener('dragover', handleDragOver, false);
    canvasContainer.addEventListener('dragleave', handleDragLeave, false);
    canvasContainer.addEventListener('drop', handleDrop, false);
} else {
    alert("This browser doesn't support the HTML5 Drag and Drop API.");
}

当我尝试添加一个使用

.append（）

添加的项目时，脚本会处理页面上的现有项目，但它无法识别该项目

此外，我还尝试了另一个选择器：

var images=document.querySelectorAll（“#images img”）

完整的代码：

   $('#images').append('<div class="col-lg-2 col-md-3 col-xs-4 thumb"><img draggable="true" class="img-thumbnail" src="'+val.path+'"alt="Another alt text" width="300"><button type="button" class="btn btn-sm btn-danger imagedel" data-id="'+val.id+'"><i class="fas fa-times"></i></button></div>');

    var images = document.querySelectorAll('.img-thumbnail');

$.getJSON('/api/getimages', null, function(e){
  //$('#images').empty();
  $.each(e.images, function(key, val){
    $('#images').append('<div class="col-lg-2 col-md-3 col-xs-4 thumb"><img draggable="true" class="img-thumbnail" src="'+val.path+'"alt="Another alt text" width="300"><button type="button" class="btn btn-sm btn-danger imagedel" data-id="'+val.id+'"><i class="fas fa-times"></i></button></div>');
  });
});

function dragAndDropSupported () {
    return 'draggable' in document.createElement('span');
}

function handleDragStart(e) {
    [].forEach.call(images, function (img) {
        img.classList.remove('img_dragging');
    });
    this.classList.add('img_dragging');
}

function handleDragOver(e) {
    if (e.preventDefault) {
        e.preventDefault();
    }

    e.dataTransfer.dropEffect = 'copy'; 

    return false;
}

function handleDragEnter(e) {
    this.classList.add('over');
}

function handleDragLeave(e) {
    this.classList.remove('over'); 
}

function handleDrop(e) {
    e.preventDefault();

    console.log(document.querySelector('#images img.img_dragging'));

    var img = document.querySelector('#images .img_dragging');
    var _canvasWidth = document.getElementById("canvas-container").clientWidth;
    var _canvasHeight = document.getElementById("canvas-container").clientHeight;
    var _scale = 1;

    if (img.width > img.height && img.width > (_canvasWidth-200) ){ _scale = (_canvasWidth-200)/img.width; }
    if (img.height > img.width && img.height > (_canvasHeight-200) ){ _scale = (_canvasHeight-200)/img.height;}

    var newImage = new fabric.Image(img, {
        scaleY: _scale/4,
        scaleX: _scale/4,
        left: e.layerX,
        top: e.layerY
    });
    canvas.add(newImage);

    return false;
}

function handleDragEnd(e) {
    [].forEach.call(images, function (img) {
        img.classList.remove('img_dragging');
    });
}

if (dragAndDropSupported() === true) {
    var images = document.querySelectorAll('.img-thumbnail');
    [].forEach.call(images, function (img) {
        img.addEventListener('dragstart', handleDragStart, false);
        img.addEventListener('dragend', handleDragEnd, false);
    });

    var canvasContainer = document.getElementById('canvas-container');
    canvasContainer.addEventListener('dragenter', handleDragEnter, false);
    canvasContainer.addEventListener('dragover', handleDragOver, false);
    canvasContainer.addEventListener('dragleave', handleDragLeave, false);
    canvasContainer.addEventListener('drop', handleDrop, false);
} else {
    alert("This browser doesn't support the HTML5 Drag and Drop API.");
}

$.getJSON（'/api/getimages'，null，函数（e）{
//$（“#图像”）.empty（）；
$。每个（如图像、功能（键、值）{
$（“#图像”）。追加（“”）；
});
});
支持的函数dragAndDropSupported（）{
在document.createElement（'span'）中返回“draggable”；
}
函数handleDragStart（e）{
[]forEach.call（图像、函数（img）{
img.classList.remove（'img_拖动'）；
});
this.classList.add（'img_拖动'）；
}
功能手柄（e）{
如果（如默认）{
e、 预防默认值（）；
}
e、 dataTransfer.dropEffect='copy'；
返回false；
}
功能手柄输入（e）{
this.classList.add（'over'）；
}
功能手柄（e）{
this.classList.remove（'over'）；
}
函数handleDrop（e）{
e、 预防默认值（）；
log（document.querySelector（'#images img.img_drawing'）；
var img=document.querySelector（“#images.img_拖动”）；
var_canvasWidth=document.getElementById（“画布容器”）.clientWidth；
var_canvashheight=document.getElementById（“画布容器”）.clientHeight；
var_标度=1；
如果（img.width>img.height&&img.width>（\u canvasWidth-200））{u scale=（\u canvasWidth-200）/img.width；}
如果（img.height>img.width&&img.height>（\u canvashheight-200））{u scale=（\u canvashheight-200）/img.height；}
var newImage=newfabric.Image（img{
比例：_比例/4，
scaleX:_比例/4，
左：e.layerX，
顶部：e.layerY
});
canvas.add（newImage）；
返回false；
}
功能手柄（e）{
[]forEach.call（图像、函数（img）{
img.classList.remove（'img_拖动'）；
});
}
如果（dragAndDropSupported（）==真）{
var images=document.querySelectorAll（'.img缩略图'）；
[]forEach.call（图像、函数（img）{
img.addEventListener（'dragstart'，handleDragStart，false）；
img.addEventListener（'dragend'，handleDragEnd，false）；
});
var canvascanner=document.getElementById（'canvas-container'）；
canvasContainer.addEventListener（'dragenter'，handleDragEnter，false）；
canvasContainer.addEventListener（'Dragver'，handleDragOver，false）；
canvasContainer.addEventListener（'dragleave'，handleDragLeave，false）；
canvasContainer.addEventListener（'drop'，handleDrop，false）；
}否则{
警报（“此浏览器不支持HTML5拖放API。”）；
}

我希望图像被放置到我的画布容器中。现在它返回一个类型错误
TypeError:img在我动态添加的图像上为null
。
这不是
[]吗。forEach
应该是
图像。forEach
？它们似乎都有相同的效果