title: touchcarousel not working when template loaded with ajax in jquery mobile
body: <p><strong>index.php</strong></p>
  
  <pre><code>&lt;div id="carousel-image-and-text" class="touchcarousel grey-blue sbSlider"&gt;       
        &lt;ul class="touchcarousel-container  item-list"  &lt;?php echo "id='".$catId."'"; ?&gt; &gt; 
        &lt;/ul&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>js:</strong></p>
  
  <pre><code> $(document).live( "pagebeforecreate", function( e, data ) { 
                      $( ".item-list" ).each(function( index ) { 
                          var id = $(this).attr("id");  
                         $.ajax({ 
                              url: "/test.html",
                              context: document.body
                               }).done(function(html) {  
                                 // $("#"+id).append(html); 
                                $("#"+id).replaceWith(html);
                          });  
                         // alert(id); 
                       }); 
  
        });
  </code></pre>
  
  <p><strong>test.html</strong></p>
  
  <pre><code> &lt;li class="touchcarousel-item"&gt;&lt;a href="gift-page.html"&gt;&lt;span&gt;&lt;img src="/images/spacer.gif" style="background:url(https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/p128x128/851586_168401033316275_1834897920_n.png) no-repeat center center; background-size:auto 50px"/&gt;&lt;/span&gt;&lt;strong&gt;Napoli&lt;/strong&gt;&lt;font&gt;Food and Drinks&lt;/font&gt;&lt;label&gt;&lt;i&gt;&lt;/i&gt;15&lt;/label&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li class="touchcarousel-item"&gt;&lt;a href="gift-page.html"&gt;&lt;span&gt;&lt;img src="/images/spacer.gif" style="background:url(https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/p128x128/851586_641022952579983_1053547819_n.png) no-repeat center center; background-size:auto 50px"/&gt;&lt;/span&gt;&lt;strong&gt;Pusheen&lt;/strong&gt;&lt;font&gt;Food and Drinks&lt;/font&gt;&lt;label&gt;FREE&lt;/label&gt;&lt;/a&gt;&lt;/li&gt;
  </code></pre>