2

我遇到了一个问题，即使用 appendTo() 添加的元素在 DOM 中无法立即使用。

首先，我从 JSON 文件中读取一些数据，然后将一些 html 附加到 div 中。然后我调用一个随机洗牌器插件来一次显示一个添加的 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);

随机洗牌器执行以下操作：

(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() 添加的元素可用，并且按预期随机选择一个。之后一切正常。

Is there some way to refresh the DOM or make these elements available to jQuery immediately after I add them with appendTo()? Any other suggestions for how to accomplish this?

4

2 回答 2

3

When exactly do you call randomShuffler? You call this function after the AJAX-request succeeds? I have always believed that the element added by appendTo available immediately after the addition.

This code works very well for me: 

<script language="javascript">
    var test = "<div class=\"test\">1</div>";
    $(test).appendTo("div#performer_spotlight");
    $("div.test").html("<b>Hello</b>");
</script>
于 2010-05-05T16:25:39.273 回答
1

Yes, like @MeF Convi says you need to call the plugin only after the getJSON finishes:

$.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);
});
于 2010-05-05T16:29:06.557 回答