JQuery 移动 header 样式在动态生成的页面上消失

Question

我有第二个页面，该页面使用来自主页上 Ajax 调用的数据填充。这个动态生成的页面上的 header 缺少所有 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 样式，我认为这些样式需要精简，但我认为这不是导致问题的原因。这是因为当我注释掉这段代码时，header 仍然缺少样式：

#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 调用的响应填充 header（和页面）。单击链接到此页面的按钮 (#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>'                            
        );
}

});

最后来一张header的照片。您会注意到它没有 JQuery 移动样式并且缺少后退按钮。

谢谢大家！

Answer 1

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

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

Working DEMO

除此之外 header 鉴于您正在应用的 CSS 样式看起来是正确的...也许您可以告诉我们您希望如何安排 header？

JQuery 移动 header 样式在动态生成的页面上消失

JQuery Mobile header styling disappearing on a dynamically generated page

css

jquery-mobile

mobile

dynamically-generated