当模板在jQuery Mobile中用Ajax加载时，touchcarousel不起作用

Question

index.php

<div id="carousel-image-and-text" class="touchcarousel grey-blue sbSlider">       
      <ul class="touchcarousel-container  item-list"  <?php echo "id='".$catId."'"; ?> > 
      </ul> 
</div>

js:

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

      });

test.html

 <li class="touchcarousel-item"><a href="gift-page.html"><span><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"/></span><strong>Napoli</strong><font>Food and Drinks</font><label><i></i>15</label></a></li>
   <li class="touchcarousel-item"><a href="gift-page.html"><span><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"/></span><strong>Pusheen</strong><font>Food and Drinks</font><label>FREE</label></a></li>

Answer 1

Correct me if i am wrong, but it seems like you are replacing your <UL> with and <LI> . So this means you will only have <LI> with out an <UL> . In this case i think you should use .append instead of .replaceWith