Стиль заголовка JQuery Mobile исчезает на динамически сгенерированной странице

У меня есть вторая страница, которая заполняется данными из вызова 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 и отсутствует кнопка «Назад».

Заголовок без оформленияВсем спасибо!


person MDalt    schedule 19.03.2015    source источник


Ответы (1)


Чтобы получить кнопку «Назад», вам нужно применить data-add-back-btn="true" к разделу заголовка, а не к разделу страницы.

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

Работает DEMO

Кроме того, заголовок выглядит правильно, учитывая стиль CSS, который вы применяете... Может быть, вы можете рассказать нам, как вы хотите, чтобы заголовок был расположен?

person ezanker    schedule 20.03.2015