如何在动态添加的Image上使用imagepicker.js？

Question

我编写了一个函数，它将使用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+'">'));

    }
}

HTML

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

Image-picker.js请参阅此内容。

Answer 1

根据您提供的链接，您需要在添加图片后在容器上调用.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();
}

PS：我将$('#cont')的结果放在变量中，因为它实际上是复杂函数的快捷方式，最终会扫描具有正确ID的元素的DOM。换句话说，它是一个代价高昂的功能，你应该尽可能避免把它放在一个循环中。