Jquery doesn't work when load data in slide show
<p>I'm using <a href="http://tympanus.net/Tutorials/ElasticSlideshow/" rel="nofollow">this slide show</a> in my asp.net mvc project. </p>

<p>When I put the mock up data in my page it worked well, but when I change it to dynamic JSON data that I take from my controller, It didn't work.</p>

<p>This is the simple html that I put as simple :</p>

<pre><code> &lt;ul class="ei-slider-large"&gt;
     &lt;li&gt;
        &lt;img src="../../Product/760557822400.jpg" alt="image05" style="margin-top: 2.467px;"/&gt;
        &lt;div class="ei-title"&gt;
           &lt;h2&gt;
              &lt;span class="productName"&gt;Dell Lat E6320 Core W7P 13.3"HD BT WC&lt;/span&gt;
              &lt;span class="productPrice"&gt;$110.00&lt;/span&gt;
           &lt;/h2&gt;
           &lt;h3&gt;
              &lt;span class="productSpec"&gt;

              &lt;br /&gt;
              Dell Latitude E6320&lt;br /&gt;
              Processor (2.8GHz, 4M Cache)&lt;br /&gt;

              ....
              &lt;/span&gt;
              &lt;span style="position:relative; left:-20px; top: -21px;"&gt;&lt;a href="#" id="readmore"&gt;Read more&lt;/a&gt;&lt;/span&gt;
           &lt;/h3&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    //there are 5 &lt;li&gt; in this &lt;ul&gt;
   &lt;/ul&gt;
</code></pre>

<p>This is the thumbnail of the slide :</p>

<pre><code>   &lt;ul class="ei-slider-thumbs" style="position:relative; left:-12px;"&gt;
         &lt;li class="ei-slider-element"&gt;Current&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;&lt;span style="font-weight:bold;"&gt;DELL&lt;/span&gt; &lt;br /&gt; Lat E6320 &lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;&lt;span style="font-weight:bold;"&gt;SONY&lt;/span&gt; &lt;br /&gt; Lat E6320 &lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;&lt;span style="font-weight:bold;"&gt;LENOVO&lt;/span&gt; &lt;br /&gt; Lat E6320 &lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;&lt;span style="font-weight:bold;"&gt;ACER&lt;/span&gt; &lt;br /&gt; Lat E6320 &lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;&lt;span style="font-weight:bold;"&gt;APPLE&lt;/span&gt;&lt;br /&gt; Lat E6320 &lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
</code></pre>

<p>Now I changed the simple data to use the my dynamic data :</p>

<pre><code> function itemSlideShow(_pictureName10,_name,_price,_notes,_id,_depID,_catID) {
    var dotString = "";
    if (_notes.length &lt; 120) {
       dotString = "";
    } else {
       dotString = " &lt;br/&gt; ....";
    }
    var listSlide = '&lt;li&gt;' +
                '&lt;img src="../../Product/' + _pictureName10 + '" alt="Product" width="135px"/&gt;' +
                '&lt;div class="ei-title"&gt;&lt;h2&gt;' +
                '&lt;span class="productName"&gt;' + TrimString(_name, 80) + '&lt;br /&gt;&lt;/span&gt;' +
                '&lt;span class="productPrice"&gt; $' + formatCurrency(_price) + '&lt;/span&gt;&lt;/h2&gt;' +
                '&lt;h3&gt;&lt;span class="productSpec"&gt;&lt;br /&gt;' + TrimString(_notes, 120) + dotString + '&lt;br /&gt;&lt;/span&gt;' +
                '&lt;span style="position:relative; left:-20px; top: -21px;"&gt;' +
                '&lt;a href="Products/ProductSpec/' + _id + '?dep=' + _depID + '&amp;cat=' + _catID + '&amp;tab=2" style="text-decoration:none;" id="readmore"&gt;Read more&lt;/a&gt;&lt;/span&gt;&lt;/h3&gt;&lt;/div&gt;' +
                '&lt;/li&gt;';

   return listSlide;
 }

 var smallLi = "";
 var url = '&lt;%: Url.Content("~/") %&gt;' + "Home/GetNewProduct";
 $.getJSON(url, function (newProduct) {
        var contentNewProduct = $("ul.ei-slider-large");
        var smallNewProduct = $("ul.ei-slider-thumbs");
        $.each(newProduct.ja, function (index, data) {
            var smallLi = $('&lt;li&gt;&lt;a href="#"&gt;&lt;span style="font-weight:bold;"&gt;' +
                                            TrimStringAddNewLine((TrimString(data.Name, 12)).toUpperCase()) +
                                            '&lt;/span&gt;&lt;br /&gt;' +
                                            '&lt;/a&gt;&lt;/li&gt;');
            contentNewProduct.append(itemSlideShow(data.PictureName10,data.Name,data.Price,data.Notes,data.ID,data.DepartmentID,data.CategoryID));
            smallNewProduct.append(smallLi); 
      });
  });
</code></pre>

<p>When I used this jquery to append data instead of loading data static, the slide getting stuck by the <code>loading</code> panel of the slide show.  </p>

<p>Could anyone tell me, how was I wrong in here?</p>

<p>Thanks in advanced.</p>
