CODEWITHSUNDEEP
jquerycssdynamicjquery-mobilecheckbox
Matthew Albone
Matthew Albone

Reputation: 33

Keeping CSS when dynamically creating checkboxes with JQuery/JQM

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

Upvotes: 3

Views: 784

Answers (1)

Phill Pafford
Phill Pafford

Reputation: 85318

You need to refresh the jQM Controls:

JS

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

Upvotes: 1

Related Questions