jQuery mobile dynamically add elements

Question

I am trying to add a list view to a jQuery mobile site after the site has been loaded. Merely adding it to the DOM doesn't work because it doesn't parse it for data-role tags once it has been loaded. Here is an example: http://jsfiddle.net/Xeon06/h2gfT/2/

My question is, how do I refresh it? I've found numerous similar questions with answers ranging from using .refresh (which doesn't work because the element is never initialized as a list view) to .page (which doesn't work at all and I have no idea why). I am using the latest version of jQuery mobile at the time of writing, 1.02b .

Thanks.

Answer 1

You can call .listview() on your element.

$("ul").listview();

Updated fiddle

Answer 2

I like to call the jQuery trigger method to accomplish this:

$(element).trigger("create")

So far it works for me without a hitch although I have heard it reported that creating new pages with this can be problematic.

Answer 3

I just removed the data-role attribute from page to make it work. I think that was the issue in your markup.

http://jsfiddle.net/h2gfT/3/