Я создаю мобильное приложение (Phonegap / Cordova 1.5.0, JQM 1.1.0) и тестирую на iOS 5.1. У меня есть список предметов, которые пользователь "владеет" или хочет владеть. Во всем приложении пользователь может редактировать свой список, добавляя и удаляя элементы. Всякий раз, когда элементы добавляются или удаляются, список обновляется, и он отображается нормально, с сохранением всего JQuery CSSexcept углы больше не закруглены (я думаю, потому что для вставки данных установлено значение «ложь»).

Вот мой HTML для списка заголовков:

<div data-role="page" id="profile">
        <div data-role="header" data-position="fixed">
            <...>
        </div><!-- /header -->
        <div data-role="content" data-theme="a">
            <...>

            <ul id="user-wants-list" data-role="listview" data-inset="true" data-theme="d" data-dividertheme="d" >
            </ul> <!--/Wants list-->
            </br>

            <ul id="user-haves-list" data-role="listview" data-inset="true" data-theme="d" data-dividertheme="d" >
            </ul>  <!--/Has list-->
            </br></br>
        </div> <!--/content-->
</div> <!--/Profile-->

А вот Javascript, где я удаляю старый список и динамически добавляю новый (параметр 'hass' является массивом объектов):

function displayHaves(haves){

var parent = document.getElementById('user-haves-list');
removeChildrenFromNode(parent);
parent.setAttribute('data-inset','true');
$(parent).listview("refresh");

var listdiv = document.createElement('li');
listdiv.setAttribute('id','user-haves-list-divider');
listdiv.setAttribute('data-role','list-divider');
listdiv.innerHTML = "I Have (" + haves.length + ")";
parent.appendChild(listdiv);

//create dynamic list
for(i=0;i<haves.length;i++){
    var sellListing = haves[i].listing;
    var userInfo = haves[i].user;
    var itemData = haves[i].item;

    //create each list item
    var listItem = document.createElement('li');
    listItem.setAttribute('id','user-haves-list-item-'+i);
    parent.appendChild(listItem);
    var link = document.createElement('a');
    link.setAttribute('id','user-haves-link-' + i);
    new FastButton(link, function(listing) {
                   return function() { displaySellListingPage(listing); }
                   }(sellListing));
    listItem.appendChild(link);

    var link = document.getElementById('user-haves-link-' + i);
    var pic = document.createElement('img');
    pic.setAttribute('src',itemData.pictureURL);
    pic.setAttribute('width','80px');
    pic.setAttribute('height','100px');
    pic.setAttribute('style','padding-left: 10px');
    link.appendChild(pic);
    var list = document.getElementById('user-haves-list');
    $(list).listview("refresh");
}

}

и моя функция removeChildrenFromNode (parent) выглядит следующим образом:

function removeChildrenFromNode(node){
    while (node.hasChildNodes()){
         node.removeChild(node.firstChild);
    }
}

Итак, мой вопрос: почему listview теряет атрибут data-inset?

Или, в равной степени, справедливо: есть ли другой способ, которым я мог бы / должен достигнуть округления угла, кроме & quot; data-inset = & quot; true & quot ;?

Вот что я пробовал:

using .trigger("create") on both the listview and the page adding the listview with explicit styling each time by using $("#page-ID").append(...) I read another post on StackOverflow that said that JQM creates some inner elements when you create an item (this post had to do with dynamic buttons not being the right size), and that there are some classes (like .ui-btn) that you can access (that may be losing styling when I remove the children from the node?), but I was unable to make any headway in that direction.

Заранее спасибо за помощь!