JRenderer和jQuery Mobile的列表視圖失去風格

Question

我在做一個非常典型的JSON請求和填充JRendere模板。它工作得很好，但是當我將li包裝在href中時，它會丟失所有格式。

HTML代碼：

<script id="recipeTemplate" type="text/x-jquery-tmpl"> 

       {{for Content}} 
       <a href='searchResults.html' data-transition='slide'> 
       <li class="ui-li ui-li-static ui-body-c" style='height: 150px; border: 0px; margin-left: 20px; margin-right: 20px;'> 
         <img src="{{:ImageURL}}" style='max-height: 125px; max-width: 125px; position: absolute;'/> 
         <div style='margin-left: 50px;'> 
          <h3 style="white-space : normal;">{{:Title}}</h3> 
          <h3 style="white-space : normal;">Ratings:</h3> 
          <p style="white-space : normal;">{{:Description}}</p> 
         </div> 

       </li> 
       </a> 
       {{/for}} 
     </script> 

的JS如下：

$("#search").focusout(function() 
{ 
    var searchTerm = $("#search").val(); 
    $.getJSON("http://website?searchterm=" + searchTerm + "&callback=?", 
    function (data) 
    { 
     var htmlString = $("#recipeTemplate").render(data); 
     $('#results').html(htmlString).listview('refresh'); 
    }); 
}); 

看起來如上。爲什麼它會丟失CSS？

謝謝，格雷姆。

Answer 1

它工作的很好，但是當我將li包裝在href中時，它會丟失所有格式的 。

首先，在標記內有<li>是無效的HTML。

你的CSS是最有可能依靠特定的順序，瞄準一個元素，那麼也許它必須有一個元素中一個特定的類另一個元素，依此類推。

通過在<li>元素周圍添加<a>，您現在已經更改了預期順序，並且CSS無法再匹配選擇器。

配售<li>裏面你<a>標籤，而不是可以保持CSS完整，同時有效的HTML，那麼，假設你有ul或ol各地在最終的HTML集li的。

檢查你的CSS，並確保你不與嵌套元素或類別的預期秩序搞亂。然後，要麼屁股<a>所以它不會破壞CSS或更新CSS來匹配新的層次結構。