Question

Possible Duplicate:
Dynamically adding collapsible elements

I would like to know how I could dynamically add a collapsible div, such a thing can be done with Jqm listviews, calling lisview(‘refresh’) after

here is the testing code:

http://jsfiddle.net/ca11111/UQWFJ/5/

edit: in above, it’s appended and rendered, but multiple times

edit2: seems working like this?

Answer 1

How about omitting the refresh since you are initializing the element (not refreshing it):

$('<div data-role="collapsible" data-collapsed="true"><h3>22</h3><span>test</span></div>').appendTo($('#coll div:first'));

$('#coll').find('div[data-role=collapsible]').collapsible();  

Here is an updated version of your JSFiddle: http://jsfiddle.net/UQWFJ/7/ (Notice I changed your setTimeout to a setInterval to continuously add new elements to the DOM)

Also you could optimize this by saving the new element in a variable so you can call .collabsible() on just that element:

var $element = $('<div data-role="collapsible" data-collapsed="true"><h3>22</h3><span>test</span></div>').appendTo($('#coll div:first'));

$element.collapsible();  

Here is a JSFiddle with this optimization: http://jsfiddle.net/UQWFJ/9/