Динамический список JQuery Mobile теряет стиль (данные -вставку )после обновления

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

Вот мой 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, где я удаляю старый список и динамически добавляю новый (параметр «имеет» — это массив объектов):

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);
    }
}

Итак, мой вопрос: почему представление списка теряет атрибут вставки данных -?

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

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

  • используя.trigger («создать» )как в списке, так и на странице
  • каждый раз добавляя список с явным стилем, используя $ (" #page -ID" ).append (...)
  • Я прочитал еще один пост на StackOverflow, в котором говорилось, что JQM создает некоторые внутренние элементы при создании элемента (, этот пост был связан с динамическими кнопками, имеющими неправильный размер ), и что есть некоторые классы (, такие как. ui -btn ), к которому вы можете получить доступ (, который может потерять стиль, когда я удаляю дочерние элементы из узла? ),но я не смог продвинуться в этом направлении.

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

5
задан Tyler Davis 2 August 2012 в 22:01
поделиться