McPhelpsius McPhelpsius - 3 months ago 7x
Javascript Question

Dynamically created collapsible-set in jQuery Mobile

Okay, once i see the answer to this, I will feel stupid. I'm certain of that.

I've created this exactly the way I want to before, but I am refactoring my code for a new version right now. I am trying to dynamically create collapsible sets in jQuery Mobile, but my html does not render right.

<div data-role="header">
<div data-role="content">
<div data-role="button" id="addprimary" data-inline="true">Add 5</div>
<div data-role="collapsible">
<form id="makecollapsible">
<div data-role="footer">
<h4>Please, no applause</h4>

$('#addprimary').on('click', function () {

var Markup = new Object();

Markup.Collapsible = function () {

.attr({ 'data-role': 'collapsible-set', 'id': 'primary' })
for (i = 0; i < 5; i++) {
.attr({ 'data-role': 'collapsible', 'data-content-theme': 'c',
'data-collapsed': 'true' })
.html('<h4>' + i +'</h4>'))

Could somebody please take a look at this and tell me what I have wrong? My
s with
are not rendering as collapsibles, which is also having an effect on the HTML I am trying to put in them later on.

Help is appreciated, thanks!


Inside Markup.Collapsible function and at the end of it, add the below. For collapsible-set, you need to tell jQM that you're enhancing a .collapsibleset() and combine it with .trigger('create').



I forgot to mention that when appending items dynamically, call enhancement methods on parent element; doing so, will enhance children elements. Thus, you don't need to use .collapsible().trigger('create') for each collapsible appended.