Why can't you initialize a slide show from elements generated and applied within JS without delaying the processing with setTimeout?

var htmlArray=(function(){
  // $.ajax retrieves json from server, generates elements and stores them in array
  return myarray;
})();

vari = 0;
var$t=$('#target');

for(i;i<htmlArray.length, i+=1){

  // Append structures in order
  $t.append(htmlArray[i]);

  // I want to initialize the slide show after the last one.
  if(i===htmlArray.length-1){
    htmlArray[i].ready(function(){

      // === これIt doesn't work well with this===
      $t.bxSlider();

      // === これThis works well====
      setTimeout(function(){
        $t.bxSlider();
      }, 100);
    }
  }
}

<divid="target">
  <div class="item"><a href="article-url">
    <p>Title String</p>
    <p><img src="img/img.jpg"/>/p>
  </a></div>
  <div class="item"><a href="article-url">
    <p>Title String</p>
    <p><img src="img/img.jpg"/>/p>
  </a></div>
  <div class="item"><a href="article-url">
    <p>Title String</p>
    <p><img src="img/img.jpg"/>/p>
  </a></div>
</div>