Недавно был вопрос о том как запихнуть картинки в local storage а потом оттуда, достать их и вывести в DOM. Я взял код, доработал и все работало.
Но у меня задача, что все элементы в DOM создаются динамически . Проблема в том, что скрипт, который работал с обычными элементами DOM, не хочет работать с элементами созданными динамически.
Вот код картинок, который их создает динамически :
console.log(masive_picture)
var idint = 0;
var masive_picture = [
"https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Proton-K-Zarya.jpg/800px-Proton-K-Zarya.jpg",
"https://upload.wikimedia.org/wikipedia/ru/3/31/Winniethepooh.jpg"
];
var box = $("body");
for (var i = 0; i < masive_picture.length; i++) {
idint++;
console.log(idint)
box.append('<img class="tableBanner1" src="' + masive_picture[i] + '">')
// $(".tableBanner").attr("id", idint);
}
box.append('<img class="tableBanner" id="tableBanner0" src="">')
box.append('<img class="tableBanner" id="tableBanner1" src="">')
})
Вот код который записывает и достёт из хранилища :
$(document).ready(function() {
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
var els = document.getElementsByClassName("tableBanner1");
var imgCnt = 0;
Array.prototype.forEach.call(els, function(bannerImage) {
// Do stuff with the element
console.log(bannerImage);
if (bannerImage.width > 0) {
imgData = getBase64Image(bannerImage);
localStorage.setItem("imgData" + imgCnt, imgData);
var dataImage = localStorage.getItem('imgData' + imgCnt);
bannerImg = document.getElementById('tableBanner' + imgCnt);
bannerImg.src = "data:image/png;base64," + dataImage;
imgCnt++;
}
});
});
Подскажыте что делаю не так ? И как надо ?
Вот фидл где весь код :
https://jsfiddle.net/85q5vq4k/3/ 
