javascript - 内容更新时 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类(class)。你想做的就是瞄准这个<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;
    }
});