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?
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/