更新内容时，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>元素格式正确：

但是一旦我更新了该链接元素（其ID为＃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>

注意：按钮的上述HTML结构适用于jQuery Mobile 1.0RC2。

请注意<span>类ui-btn-text。您想要做的是定位此<span>并更改其文本，如果您尝试更改整个<a>标记的文本，您将丢失用于设置按钮样式的内部<span>标记。

所以你的选择器应该是这样的：

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

您不必使用.trigger('create')，因为样式不会丢失。

以上是上述解决方案的一个方面：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');

或者你可以在if语句中return false;（这将打破$.each()循环）：

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