2 Stimmen

Mit appendTo() hinzugefügte Elemente nicht sofort verfügbar

Ich habe ein Problem mit Elementen, die mit appendTo() hinzugefügt werden, die nicht sofort im DOM verfügbar sind.

Zuerst lese ich einige Daten aus einer JSON-Datei und füge dann etwas HTML an ein Div an. Dann rufe ich ein zufälliges Shuffler-Plugin auf, um eines der hinzugefügten Divs auf einmal anzuzeigen.

    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);

Der Random Shuffler macht folgendes:

(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);

Wenn die Funktion shuffleElement() zum ersten Mal aufgerufen wird, ist $(shuffledElements).length gleich 0, so dass kein Element angezeigt wird. Beim nächsten Aufruf von shuffleElement() sind die mit appendTo() hinzugefügten Elemente verfügbar, und eines wird wie erwartet nach dem Zufallsprinzip ausgewählt. Danach funktioniert alles korrekt.

Gibt es eine Möglichkeit, das DOM zu aktualisieren oder machen diese Elemente verfügbar für jQuery sofort, nachdem ich sie mit appendTo() hinzufügen? Irgendwelche anderen Vorschläge, wie man das erreichen kann?

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X