在jquery mobile中使用ajax加载模板时,touchcarousel无法正常工作

时间:2013-08-01 11:39:14

标签: php jquery ajax jquery-mobile

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

1 个答案:

答案 0 :(得分:0)

如果我错了,请纠正我,但似乎您正在用<UL>取代<LI>。 因此,这意味着您只有<LI> <UL>。在这种情况下,我认为您应该使用.append而不是.replaceWith