CSS will not apply to dynamically created elements in jQuery mobile

Question

I want to add dynamically generated list items to an unordered list in my jQuery mobile page.

But when I add new list items, the existing CSS isnt applied. sortedList is my ul.

Ive tried a few different things including:

jQuery('#sortedList').append('<li><h3>SUCCESS</h3></li>')

jQuery('#sortedList li').html('<h3>SUCCESS</h3>')

jQuery('#sortedList li').append('<h3>SUCCESS</h3>')

jQuery('#sortedList li').trigger('create');
jQuery('#sortedList li').append('<h3>SUCCESS</h3>')

Nothing works, any suggestions or advice would be greatly appreciated

@LinkinTED the question is about jQuery mobile, not vanilla CSS. The title is poorly stated, but please read the details of the question. — xdumaine, Sep 10 '13 at 11:16
possible duplicate of [jQuery Mobile: Markup Enhancement of dynamically added content](http://stackoverflow.com/questions/14550396/jquery-mobile-markup-enhancement-of-dynamically-added-content) — Omar, Sep 10 '13 at 12:03

xdumaine · Accepted Answer · 2013-09-10T11:14:45.977

2

You should add all items to the list, then refresh the listview :

$('#sortedList').append('<li><h3>Success</h3></li>').listview('refresh');

Here's a JSFiddle.

As a sidenote: you don't have to spell out jQuery every time, to use jQuery. The $ symbol is another name for the jQuery object, so jQuery('#mySelector') is equivalent to $('#mySelector')

edited Sep 10 '13 at 11:14

answered Sep 10 '13 at 11:07

xdumaine

10,096
6
62
103

1

Cheers mate, this works perfectly! And Im aware of the $, but I have to use jQuery selector for this. Cheers though – Daft Sep 10 '13 at 11:24

CSS will not apply to dynamically created elements in jQuery mobile

1 Answers1