JQM (jQueryMobile) Dynamically added elements not displaying correctly and CSS is not applied

Question

I\'m having an issue with adding a select tag dynamically, the CSS and additional html tags (that JQM add) are is not being applied.

Here is an example of how I\'m a

Answer 1

Should use .trigger("create") on the parent of the object(s) you want to render correctly.

Check the following link:

http://demos.jquerymobile.com/1.3.2/faq/injected-content-is-not-enhanced.html

And the following answer: https://stackoverflow.com/a/11054451/487812

Answer 2

Try this:

$(newSelect).selectmenu('refresh');

or this which will force the rebuild of it:

$(newSelect).selectmenu('refresh', true);

and please let me know if it worked.

Answer 3

I have no idea why .selectmenu('refresh'); doesn't work, but as for page - you can use it once on an element. After that it skips the element the next time.

1. clone the select before adding stuff (clone without parameters)
2. Remove the original
3. add stuff to the cloned element
4. put it back in dom
5. call .page() or .selectmenu() on it, or call .page() on the element that contains it.

Should help. If not, then try to create a new select element from scratch and load it with options from the original one and add new ones and then proceed.

[edit]

The above was just a guess. Your code is ok the way it is. just needs a single call to .selectmenu() Working code:

http://jsfiddle.net/UcrD8/45/