元素添加與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（）不立即可用

回答

相關問題