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');
    });
});

error

如上所述。为什么它会丢失CSS？

谢谢，Graeme。

Answer 1

它的效果很好，但是当我将li包裹在一个href中时，它会失去一切格式化。

首先，在<li>标记中包含<a>是无效的HTML。

您的CSS很可能依赖于特定的订单，以某个元素为目标，然后可能是另一个必须在该元素中包含特定类的元素，依此类推。

通过在<a>元素周围添加<li>，您现在已经更改了预期的顺序，而CSS无法再与选择器匹配。

将<a>标记放在<li>内可以保持CSS完好无损，同时又是有效的HTML，假设您有ul或ol最终HTML中li的集合。

检查您的CSS并确保您没有弄乱嵌套元素或类的预期顺序。然后选择<a>，这样就不会破坏CSS或更新CSS以匹配新的层次结构。

渲染器和JQuery Mobile Listview丢失风格

1 个答案: