使用 appendTo() 添加的元素不会立即可用答案

【问题标题】：Elements added with appendTo() not immediately available使用 appendTo() 添加的元素不会立即可用
【发布时间】：2011-02-16 00:39:51
【问题描述】：

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

在我使用 appendTo() 添加这些元素后，是否有某种方法可以刷新 DOM 或让 jQuery 立即使用这些元素？对于如何实现这一点还有其他建议吗？

【问题讨论】：

标签： javascript jquery dom appendto

【解决方案1】：

你究竟什么时候调用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>

【讨论】：

是的。我在之后调用它。我编辑了上面的代码块以显示它在我的 js 文件中的样子。

【解决方案2】：

是的，就像@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);
});

【讨论】：