JQuery Mobile теряет форматирование при обновлении контента

Question

Сначала я вызываю getJSON, чтобы вывести соответствующие данные. Затем я использую следующий код для обновления уже существующего элемента <a href=""></a>.

$.getJSON("http://URL.com?unitnumber="+query+"", function(data) {
    var encounter = $('#encounter');
    $.each(data, function(i) {
        if(i==0){
            $('#date1').text(""+data[i].DateDisp+"").trigger('create');
        }
     });
});

Исходный элемент <a> отформатирован правильно:

Но как только я обновлю текст внутри этого элемента ссылки (чей идентификатор # date1), я потеряю форматирование. Это несмотря на попытки использовать .trigger ('create') ...

Answer 1

Вы можете использовать структуру, которую jQuery Mobile добавляет к вашей кнопке (тег <a>), и заменять только текст кнопки.Ниже приведен пример кнопки после ее стилизации в jQuery Mobile:

<a data-role="button" data-theme="c" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-up-c">
    <span aria-hidden="true" class="ui-btn-inner ui-btn-corner-all">
        <span class="ui-btn-text">Updated Text (6)</span>
    </span>
</a>

A Примечание: Приведенная выше структура HTML кнопки предназначена для jQuery Mobile 1.0RC2.

Обратите внимание на <span> с классом ui-btn-text.Вам нужно нацелиться на этот <span> и изменить его текст, если вы попытаетесь изменить текст всего тега <a>, вы потеряете внутренние теги <span>, которые стилизуют кнопку.

Таким образом, ваш селектор должен выглядеть следующим образом:

$('#date1').find('.ui-btn-text').text(...);

И вам не нужно будет использовать .trigger('create'), потому что стиль не будет потерян.

Вот jsfiddle вышеупомянутого решения:http://jsfiddle.net/jasper/4DAfn/3/

Кроме того, если вы перебираете возвращенные данные JSON и используете только первую строку информации, подумайте о замене следующего:

$.each(data, function(i) {
    if(i==0){
        $('#date1').text(""+data[i].DateDisp+"").trigger('create');
    }
});

На:

$('#date1').text(""+data[0].DateDisp+"").trigger('create');

Или вы можете просто return false; в своем операторе if (что нарушит цикл $.each()):

$.each(data, function(i) {
    if(i==0){
        $('#date1').text(""+data[i].DateDisp+"").trigger('create');
        return false;
    }
});