JQuery Mobile 标题样式在动态生成的页面上消失答案

【问题标题】：JQuery Mobile header styling disappearing on a dynamically generated pageJQuery Mobile 标题样式在动态生成的页面上消失
【发布时间】：2015-03-19 20:28:17
【问题描述】：

我有第二个页面，它使用来自主页上的 Ajax 调用的数据填充。这个动态生成的页面上的标题缺少它的所有 JQuery 样式，我怀疑这两者是相关的。这是我正在生成的页面的 HTML：

<div data-role="page" id="breakdownDialog" data-add-back-btn="true">
        <div data-role="header" id="cvResultsDialog">
            <h3></h3>
            <span></span>
        </div>
        <div data-role="content" id="dialogContent">

        </div>
    </div>

我还使用了一些 CSS 样式，我认为需要对其进行精简，但我认为这不是问题所在。这是因为当我注释掉这段代码时，标题仍然缺少样式：

#cvResultsDialog {          
        width:100%;
        text-justify: distribute-all-lines;         
        }

#cvResultsDialog:after{
content: '';
display: inline-block;
width: 100%;
height: 0;
font-size:0;
line-height:0;
}

#cvResultsDialog > h3 {
             display: inline-block;
             display:inline;
             text-align="left";
            }

#cvResultsDialog span {
            display: inline-block;
            vertical-align: baseline;
            text-align="right";
            }

然后，我使用来自上一页的 Ajax 调用的响应来填充标题（和页面）。单击链接到此页面的按钮 (#resultsList) 即可填充该页面：

$('#resultsList').on('click', '#cvResults', function() {
//find previous result that matches the filename on the link.
for(var i=0;i<storedResponses.length;i++){                  
    var currentTitle=storedResponses[i].title;
    var textClicked=$("h3",this).text();
    if(currentTitle===textClicked){
        currentResult=storedResponses[i];
    }
}
$('#cvResultsDialog h3').text(currentResult.title);
$('#cvResultsDialog span').text(currentResult.percentage);

//this last bit is populating the page, so is irrelevant for this question
$('#dialogContent').empty();
for(var i=0; i<currentResult.profile_json.length; i++){
$('#dialogContent').append(
            '<table  cellpadding="0" cellspacing ="0" width="100%" style="border: 4px solid transparent;"><tr id="'+ 
            currentResult.profile_json[i].title+'"><td>'+
            currentResult.profile_json[i].id+'</td><td align="right">'+
            currentResult.profile_json[i].value+'</td></tr>'                            
        );
}

});

最后是标题的图片。您会注意到它没有 JQuery Mobile 样式并且缺少后退按钮。

谢谢大家！

【问题讨论】：

标签： css jquery-mobile mobile dynamically-generated

【解决方案1】：

要获得后退按钮，您需要将data-add-back-btn="true" 应用于标题 div 而不是页面 div。

<div data-role="header" id="cvResultsDialog" data-add-back-btn="true">

工作DEMO

考虑到您应用的 CSS 样式，除了标题看起来是正确的之外......也许您可以告诉我们您希望如何排列标题？

【讨论】：