Javascript 如何在动态添加的图像上使用imagepicker.js？

我已经编写了一个函数，它将使用body onload=getImages（）函数在页面中动态添加图像

第一个问题是，我无法看到HTML页面上的图像，尽管它们在我使用inspect元素时存在。 其次，图像选择器无法使用动态内容

守则如下：

function.js

var imgData={
        "1": {
            "url": "img/pic1.png",
            "name": "pic1"
        },
        "2": {
            "url": "img/pic2.png",
            "name": "pic2"
        },
        "3": {
            "url": "img/pic3.png",
            "name": "pic3"
        }
}
function getImages(){

    for ( var i in imgData) {

        $('#cont').append($('<option data-img-src="'+imgData[i].url+'" data-img-label="Just an image!" value="'+i+'">'));

    }
}

var imgData={
"1": {
“url”：“img/pic1.png”，
“名称”：“pic1”
},
"2": {
“url”：“img/pic2.png”，
“名称”：“pic2”
},
"3": {
“url”：“img/pic3.png”，
“名称”：“pic3”
}
}
函数getImages（）{
用于（imgData中的var i）{
$（'#cont'）。追加（$（''）；
}
}

HTML

<select id="cont" multiple="multiple" data-limit='4'>
</select>

---

请参考此链接。

根据您提供给我们的链接，在添加图像后，您需要在容器上调用

.imagepicker（）

function getImages(){
    var container = $('#cont');
    for (var i in imgData) {
        container.append($('<option data-img-src="'+imgData[i].url+'" data-img-label="Just an image!" value="'+i+'">'));
    }
    container.imagepicker();
}

函数getImages（）{ 变量容器=$（“#cont”）； 用于（imgData中的var i）{ 容器。追加（$（''）； } container.imagepicker（）； }

---

PS：我将

$（'#cont'）

的结果放在一个变量中，因为它实际上是一个复杂函数的快捷方式，最终会扫描DOM以查找具有正确ID的元素。换句话说，这是一个昂贵的函数，您应该尽可能避免将其放入循环中。

检查元素或变量时会出现图像？这可能是加载顺序的问题吗？如果在更改dom之前加载图像选择器，则需要再次启动图像选择器以查找这些新图像