javascript - JRenderer 和 JQuery Mobile ListView 丢失样式

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

It works great, but when I wrap the li in a href it loses all formatting.

首先，有一个 <li>在 <a> 内标记是无效的 HTML。

您的 CSS 很可能依赖于特定的顺序，以一个元素为目标，然后可能是另一个元素，该元素必须在该元素内具有特定的类，等等。

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

放置您的 <a> <li> 内的标签相反可以保持 CSS 完整，同时是有效的 HTML，好吧，假设你有 ul或 ol围绕 li 的集合在最终的 HTML 中。

检查您的 CSS 并确保您没有弄乱嵌套元素或类的预期顺序。然后要么屁股<a>因此它不会破坏 CSS 或更新 CSS 以匹配您的新层次结构。