Элементы, добавленные с appendTo (), не доступны сразу - PullRequest
Новая
       9

Элементы, добавленные с appendTo (), не доступны сразу

2 голосов
/ 05 мая 2010

У меня проблема с элементами, добавленными с appendTo (), которые не были сразу доступны в DOM.

Сначала я читаю некоторые данные из файла JSON, а затем добавляю html в div.Затем я вызываю случайный плагин shuffler, чтобы показать один из добавленных div'ов за раз. 

    jsonUrl = "js/performers.json";

    $.getJSON(jsonUrl, function(json) {
        $.each(json.performers, function(i, performer) {
            var html = '<div class="performer_mini">';
            html += '<img src="' + performer.thumbnail + '" alt="' + performer.name + '" /><br />';
            html += performer.name + '<br /></div>';
            $(html).appendTo("div#performer_spotlight");
        });
    });

    $("#performer_spotlight").randomShuffler(".performer_mini", 3000, 3000, 9000);

Случайный shuffler делает следующее: 

(function($) {
    $.fn.randomShuffler = function(shuffledElements, fadeInTime, fadeOutTime, timeout) {
        fadeInTime = fadeInTime || 3000;
        fadeOutTime = fadeOutTime || 3000;
        timeout = timeout || 9000;

        $(shuffledElements).hide();

        var $old_element;
        var $new_element;
        var old_index = 0;
        var new_index = 0;

        function shuffleElement() {
            $old_element = $new_element;
            old_index = new_index;
            while ($(shuffledElements).length > 0 && old_index == new_index) { // don't display the same element twice in a row
                new_index = Math.floor(Math.random()*$(shuffledElements).length);
            }
            $new_element = $(shuffledElements + ":eq(" + new_index + ")");
            if ($old_element != undefined) {
                $old_element.fadeOut(fadeOutTime, function() {
                    $new_element.fadeIn(fadeInTime);
                });
            } else {
                $new_element.fadeIn(fadeInTime);
            }
            setTimeout(shuffleElement, timeout);
        }

        $(this).show();
        shuffleElement();
    }
})(jQuery);

Первый раз shuffleElement() функция называется $ (shuffledElements) .length равна 0, поэтому элемент не отображается.При следующем вызове shuffleElement () доступны элементы, добавленные с помощью appendTo (), и один из них выбирается случайным образом, как и ожидалось.После этого все работает правильно.

Есть ли способ обновить DOM или сделать эти элементы доступными для jQuery сразу после того, как я добавлю их с помощью appendTo ()?Любые другие предложения о том, как это сделать?

Ответы [ 2 ]

3 голосов
/ 05 мая 2010

Когда именно вы вызываете randomShuffler? Вы вызываете эту функцию после успешного выполнения AJAX-запроса? Я всегда считал, что добавленный элемент appendTo доступен сразу после добавления.

Этот код очень хорошо работает для меня: 

<script language="javascript">
    var test = "<div class=\"test\">1</div>";
    $(test).appendTo("div#performer_spotlight");
    $("div.test").html("<b>Hello</b>");
</script>
1 голос
/ 05 мая 2010

Да, как @MeF Convi говорит, что вам нужно вызывать плагин только после завершения getJSON: 

$.getJSON(jsonUrl, function(json) {
    $.each(json.performers, function(i, performer) {
        var html = '<div class="performer_mini">';
        html += '<img src="' + performer.thumbnail + '" alt="' + performer.name + '" /><br />';
        html += performer.name + '<br /></div>';
        $(html).appendTo("div#performer_spotlight");
    });
    $("#performer_spotlight").randomShuffler(".performer_mini", 3000, 3000, 9000);
});
...