web-dev-qa-db-fra.com

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

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 être 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 qui est créé statiquement. Est-ce que quelqu'un sait pourquoi et comment je peux faire la même chose?

jqueryhtml5jquery-mobile
40
locoboy

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');
87
thecodeparadox

Les réponses fournies se sont avérées être un peu en désordre ...

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

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

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 à nouveau créé avec les propriétés réinitialisées.

2
Sandeep Taneja

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>');
0
Cyber Slueth Omega

Vous devrez ajouter une classe à la balise de liste

$('<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 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.

0
thebugger