我编写了一个函数,该函数将使用 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请同时引用此内容。
最佳答案
根据您提供给我们的链接,您需要在添加图像之后在容器上调用.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 的元素。换句话说,这是一个成本高昂的函数,您应该尽可能避免将其放入循环中。
关于javascript - 如何在动态添加的Image上使用imagepicker.js?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32204262/