Невозможно выбрать элементы json, добавленные динамически с добавлением

Question

Я пытаюсь создать простой слайдер с перекрестным затуханием, но на этот раз с изображениями, извлеченными из json-файла, и динамически добавлен в контейнер.

Я могу легко получить все фотографии со всей информацией внутри json-файла, но как только мне нужно будет их позже выбрать, я не могу. Как будто их там нет. Это не первый раз, когда я динамически добавляю элемент html. Я часто использую .append() или .prepend(), и я могу легко найти их детей после их создания.

Итак, у меня есть div, в котором я динамически загружаю некоторые изображения. Я хочу снова забрать их (а не из json-файла на этот раз, но из dom), поэтому я могу сделать плагин с ним.

$.fn.slider = function(options) { 
    var picstore, $fig, 
    def = { 
    json: undefined, 
    dataName: 'jsonslider' 
    }, 
    cfg = $.extend(true, def, options), 
    store = cfg.json, 
    dataN = cfg.dataName, 
    $wrap = $(this), 
    $next = $wrap.next(); 

$.getJSON(store, function(data) { 
    picstore = data.pictures; 

    for (i = 0; i < picstore.length; i++) { 
    $wrap.append('<figure data-' + dataN +'="' + i + '"><img src="' + picstore[i].url + '" alt="' + picstore[i].alt + '"/></figure>'); 
}; 

Я пробовал все!

$fig = $wrap.children() не работает

$fig = $('[data-' + dataN + '="0"]') не работает

Что вы предлагаете мне делать?

demo

github index.html raw file

github js raw file

github json raw file

Answer 1

Здесь решение.

$.getJSON(store, function(data) { 
    var arr = $.map(data, function(el){ return el; }); 

    for (i = 0; i < arr.length; i++) { 
    $wrap.append($('<figure data-' + dataN +'="' + i + '"><img src="' + arr[i].url + '" alt="' + arr[i].alt + '"/></figure>')); 
    }; 

    var figs = $wrap.children(); 
    figs.first().addClass('slider-active'); 
}); 

Вы не можете получить доступ к динамическим объектам json вне функции.