Question

我遇到的问题是添加了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);

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

(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？关于如何实现这一目标的任何其他建议？

Answer 1

你什么时候打电话给randomShuffler？在AJAX请求成功后调用此函数？我一直认为addndTo添加的元素在添加后立即可用。

这段代码对我很有用：

<script language="javascript">
    var test = "<div class=\"test\">1</div>";
    $(test).appendTo("div#performer_spotlight");
    $("div.test").html("<b>Hello</b>");
</script>

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

添加了appendTo（）的元素不能立即使用

2 个答案: