Here's the html:
<form>
<fieldset data-role="controlgroup" data-type="horizontal" id="buddies" />
</form>
Here's the javascript:
for (var i = 0; i < json.length; i++) {
var usr = json[i];
var mid = usr.mid;
var input = '<input id="' + mid + '" type="checkbox"';
var photo = usr.photo;
if (typeof photo === 'undefined') {
photo = '<span class="middle"></span><br/>';
no_photo_ids[no_photo_ids.length] = mid;
} else {
photo = '<span class="middle"><img src="' + photo + '"/></span><br/>';
if (max_invite_messages-- > 0) {
input += ' checked="checked"';
}
}
input += '>';
var label = '<label for="' + mid + '">' + photo + usr.name + '</label>';
$('#buddies').append(input);
$('#buddies').append(label);
}
$('#buddies').trigger('create');
It works all right in jquery mobile 1.3.2, just like:
But it messed up in 1.4.3, just like:
Finally I found a solution: Control group loses control after dynamic add of radio button - jQuery Mobile
1.3.2 is easy to work like this:
$('#buddies').append(...);
$('#buddies').append(...);
...
$('#buddies').trigger('create');
1.4.3 is much a mess like this:
$('#buddies').controlgroup("container").append(...);
$('#buddies').controlgroup("container").append(...);
...
$('#buddies').enhanceWithin().controlgroup("refresh");
Now it works pretty good: