Как использовать imagepicker.js на динамически добавленном изображении?

Question

Я написал функцию, которая будет динамически добавлять изображения на страницу с помощью функции bodyloadload = 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. Другими словами, это дорогостоящая функция, и вам следует избегать попадания в петлю, когда это возможно.