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

Question

我编写了一个函数，该函数将使用 body onload=getImages() 函数在页面中动态添加图像。

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

代码如下:

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') 的结果放入变量中，因为它实际上是一个复杂函数的快捷方式，该函数最终会扫描 DOM 来查找具有正确 ID 的元素。换句话说，这是一个成本高昂的函数，您应该尽可能避免将其放入循环中。