Question

我有第二个页面，它使用主页上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样式，并且缺少后退按钮。

Header with styling missing 谢谢大家！

Answer 1

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

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

正在使用 DEMO

除了标题看起来正确，因为您正在应用CSS样式...也许您可以告诉我们您希望如何排列标题？

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

1 个答案: