Элементы, добавленные с appendTo(), не сразу доступны

Question

У меня возникла проблема с элементами, добавленными с appendTo(), которые не были сразу доступны в DOM.

Во-первых, я читаю некоторые данные из файла JSON, а затем добавляю некоторые html в div. Затем я вызываю случайный плагин shuffler, чтобы показать один из добавленных divs за раз.

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

Случайное Shuffler выполняет следующие действия:

(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(), доступны, и один выбирается случайным образом, как ожидалось. После этого все работает правильно.

Есть ли способ обновить DOM или сделать эти элементы доступными для jQuery сразу после добавления их с помощью appendTo()? Любые другие предложения о том, как это сделать?

Answer 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> 

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