Question

使用PhoneGap开发Android我使用存储在本地数据库中的数据动态加载ListView组件。当我保存新的设置信息并假装获取所有存储的设置时，ListView正在显示所有内容但是丢失了jQueryMobile样式。

这是我的html的相应部分：

<div data-role="page" data-theme="b" id="pageIndex">

    <div data-role="content" id="cntMain">
        New settings attribute
        <div id="nameDiv" data-role="fieldcontain">
            <label for="name" data-inline="true">Name</label>
            <input id="name" type="text"></input>
        </div>
        <div id="valueDiv" data-role="fieldcontain">
            <label for="value" data-inline="true">Value</label>
            <input id="value" type="text" ></input>
        </div>
        <a href="#" onclick="saveNewAttribute();" data-role="button">Save</a>
    </div> <!-- cntMain -->

    <div data-role="content" id="cntShow">
        Settings stored
        <ul id="settingsList" data-role="listview" data-filter="true" data-theme="b"></ul>
    </div> <!-- cntShow -->

</div>

调用的js函数是：

function saveNewAttribute() {
    name = $('#name').val();
    value= $('#value').val();

    try {
        ... // Validations, saving new attribute,...

        // Get settings information (executeDBQuery is just a shortcut function for performing the query)
        executeDBQuery('SELECT * FROM SETTINGS', function(tx, results) {
            var len = results.rows.length;
            console.info('readed ' + len + ' rows');
            var html = '';
            for (var i=0; i<len; i++){
                var row = results.rows.item(i);
                html += '<li data-theme="b"><a href="#" onclick="editAttribute(' + row.id + ')" data-transition="slide">' +
                        '<h3>' + row.name + '</h3>' + 
                        '<p><strong>' + row.value + '</strong></p></a></li>';
            }
            console.info('Generated html=' + html);
            $('#settingsList').html(html);
        });
    } catch (e) {
        alert('Error: ' + e.message);
    }

    $('#cntMain').hide();
    $('#cntShow').show();
}

有谁知道如何刷新那些jQueryMobile样式？或者是否有其他方法可以动态加载ListView？

提前谢谢。

Answer 1

我找到了解决方案，万一有人感兴趣。写$('#settingsList').html(html).listview('refresh');而不是$('#settingsList').html(html);。

ListView jQueryMobile样式丢失了更新其内容

1 个答案: