Ajout dynamique <li/> à <ul/> dans jquery mobile

Question

J'essaie d'ajouter des éléments de liste à des listes non ordonnées dans jQuery Mobile, mais la mise en forme ne semble pas avoir été créée correctement.

 <ul data-role="listview" data-theme="c" data-dividertheme="b">
                    <li data-role="list-divider">
                        Title Divider
                    </li>
                    <li>
                        <a href="test.html" data-transition="slide">List item 1</a>
                    </li>

 </ul>
 

Scénario:

 $('ul').append('<li><a>hello</a></li>');
 

Pour une raison quelconque, le li généré dynamiquement ne s'affiche pas de la même manière que celui créé de manière statique. Est-ce que quelqu'un sait pourquoi et comment je peux le faire pareil?

Answer 1

Essaye ça:

 $('ul').append($('<li/>', {    //here appending `<li>`
    'data-role': "list-divider"
}).append($('<a/>', {    //here appending `<a>` into `<li>`
    'href': 'test.html',
    'data-transition': 'slide',
    'text': 'hello'
})));

$('ul').listview('refresh');
 

Answer 2

Les réponses fournies se sont avérées un peu compliquées ...

$('ul').append('<li><a>hello</a></li>'); est ok, mais il doit actualiser la liste, donc tout ce dont vous avez besoin est:

 $('ul').append('<li><a>hello</a></li>').listview('refresh');
 

Answer 3

Et si vous souhaitez modifier les attributs de UL, vous devrez peut-être appeler .trigger ("create") pour le div englobant. Cela garantit que UL est créé à nouveau avec les propriétés réinitialisées.

Answer 4

Votre balise <a> ne fait pas référence à une page Web.

essayer:

 $ ('ul'). append ('<li> <a href="test2.html' data-transition="slide" /> Élément de liste 2 </ li> '); 

Answer 5

Vous devrez ajouter une classe à la balise list

 $('<ul>').append( $('<li>').attr('class','ui-li ui-li-static ui-btn-up-c ui-li-last').append('hello'))  ;
 

JQuery mobile ajoute automatiquement une classe aux éléments de la liste, ce qui peut être vu si vous exécutez votre page dans Firefox et que vous la déboguez à l'aide de Firebug. Sélectionnez la classe qui a été appliquée et ajoutez-la à votre balise li générée dynamiquement.