Search code examples
jqueryjquery-mobilecollapsable

Jquerymobile adding dynamic collapsible divs

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?

Solution

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