jquery-mobilejquery-mobile-checkbox

from jquery mobile 1.3.2 to 1.4.3, checkbox horizontal failed


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: enter image description here

But it messed up in 1.4.3, just like: enter image description here


Solution

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

    enter image description here