Ich erstelle eine mobile App (Phonegap / Cordova 1.5.0, JQM 1.1.0) und teste auf iOS 5.1. Ich habe eine Liste von Gegenständen, die der Benutzer "besitzt" oder besitzen möchte. Überall in der App kann der Benutzer seine Liste bearbeiten, indem er Elemente hinzufügt und entfernt. Jedes Mal, wenn Elemente hinzugefügt oder entfernt werden, wird die Liste aktualisiert und in Ordnung angezeigt, wobei das gesamte JQuery-CSS intakt bleibtaußer Die Ecken sind nicht mehr abgerundet (ich denke, weil die Dateneingabe auf "falsch" gesetzt wird).

Hier ist mein HTML für die Listenüberschriften:

<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-->

Und hier ist das Javascript, in dem ich die alte Liste entferne und die neue dynamisch hinzufüge (der Parameter 'haves' ist ein Array von Objekten):

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

}

und meine Funktion removeChildrenFromNode (Eltern) ist wie folgt:

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

Meine Frage ist also, warum die Listenansicht das Dateneinfügungsattribut verliert.

Oder, ebenso gültig: Gibt es einen anderen Weg, wie ich eine Eckenrundung erzielen könnte / sollte, als "data-inset = 'true'"?

Hier sind Dinge, die ich ausprobiert habe:

Verwenden von .trigger ("create") sowohl in der Listenansicht als auch auf der SeiteHinzufügen der Listenansicht mit explizitem Stil jedes Mal mit $ ("# page-ID"). Anhängen (...)Ich habe in einem anderen Beitrag über StackOverflow gelesen, dass JQM beim Erstellen eines Elements einige innere Elemente erstellt (dieser Beitrag hatte mit dynamischen Schaltflächen zu tun, die nicht die richtige Größe haben) und dass es einige Klassen (wie .ui-btn) gibt, die Sie verwenden Ich kann darauf zugreifen (wenn ich die untergeordneten Elemente vom Knoten entferne, verliert dies möglicherweise das Styling?), konnte jedoch keine Fortschritte in diese Richtung erzielen.

Vielen Dank im Voraus für die Hilfe!