元素添加与appendTo（）不立即可用

我遇到与元素添加与appendTo（）不能立即在DOM中可用的问题。元素添加与appendTo（）不立即可用

首先，我从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）。长度等于0，所以不显示元件。在下一次调用shuffleElement（）时，添加了appendTo（）的元素可用，并且按预期随机选择一个元素。之后一切正常。

是否有一些方法来刷新DOM或使这些元素立即可用于jQuery后，我用appendTo（）添加它们？有关如何完成此任何其他建议？

来源

2010-05-05 Craig M

什么时候你打电话给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>

来源

2010-05-05 16:25:39

是。我打电话过后。我编辑了上面的代码块，以显示它在我的js文件中的样子。 – 2010-05-05 17:43:52

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

来源

2010-05-05 16:29:06 Pointy

元素添加与appendTo（）不立即可用

回答

相关问题