Keeping CSS when dynamically creating checkboxes with JQuery/JQM

Question

I have some code that takes values from a database, and uses them to create a set of checkboxes dynamically:

$("#cTable").append('<fieldset data-role="controlgroup"> <legend>Option</legend>');

cDest = "includes/loadCategories.php"; 

$.getJSON(cDest, function(data) {
    cInfo = data.items;
    $.each(cInfo, function(index, info) {

        $("#cTable").append('<input type="checkbox" name="cat" id="cat_' + info.S_ID + ' class="ui-checkbox" value="' + info.S_ID + '" /><label for="chkCat_' + info.S_ID + '">' + info.S_Name + '</label> </br>');
    });
    $("#cTable").append('</fieldset>');
}); 

The issue is that these newly created checkboxes don't take on the JQuery Mobile CSS styling. Is there any way to assign the JQM css to this dynamically created element?

I thought about using the JQuery .CSS() function, but as I don't actually know the CSS needed (as it is part of default JQM), I dont think i can use this method.

Thanks

Answer 1

You need to refresh the jQM Controls:

• http://jquerymobile.com/demos/1.1.0-rc.1/docs/forms/checkboxes/methods.html

JS

$("input[type='checkbox']").checkboxradio("refresh");