Выбор элемента после функции jQuery appendTo

Question

Мне нужно динамически добавить набор элементов в div с помощью jQuery, а затем развернуться и сослаться на них. Это действительно странно, что вы не можете сделать это, поскольку, если вы просматриваете DOM в firebug, элементы присутствуют. JQuery просто не действует, как они существуют.

HTML ...

<div id="images"></div>

Это дает мне мои элементы, добавленные к <div> ...

        $.getJSON("http://localhost/wordpress/test.php",
        function(data){
          $.each(data, function(i,item){
            $("<img/>").attr("src", item).appendTo("#images");
          });
        });

Тогда я сразу пытаюсь выбрать и использовать изображения ...

        $("img").each(
            function(i,item) {
                alert(item);
            });

jQuery не выбирает ни один из недавно добавленных элементов. По сути, он действует так, как будто ни одно из изображений не было добавлено.

Answer 1

Я бы рискнул предположить, что когда вы запускаете второй блок кода, изображения еще не появятся. Вызов getJSON является асинхронным. Это означает, что вы не знаете, когда он вернется и добавит элементы изображения на страницу.

Вы пытались добавить свой второй блок кода в ту же функцию, которая вызывает appendTo? Это распространенный источник путаницы, когда люди делают асинхронный код.

Answer 2

Вам необходимо использовать функцию jQuery , поскольку ваши новые изображения вставляются в DOM после загрузки страницы.

В качестве быстрого примера:

$("img").live("click", function() {
    alert(this);
});

Запустит оповещение для каждого изображения на странице, независимо от того, когда оно было добавлено. Ваш типичный $("img").click() не работал бы с вашими добавленными изображениями.