Append Form And Input To Form jQuery Mobile

Question

I am appending checkboxes to a form based on data returned from an ajax call using jquery mobile. When I append the form and its elements, the form loses all of its styling. The checkboxes should be attached together and the submit button is also in a different style.

jsFiddle Example

JS Code:

$('#editattendancecontent').append('<p>Who Attended?</p><form id="editattendanceform"><div data-role="fieldcontain"><fieldset data-role="controlgroup" id="editattendancelist"></fieldset></div><input type="submit" value="Save Attendance" data-inline="true" /></form>');
for (var i = 0; i<5; i++)
{
    $('#editattendancelist').append('<input type="checkbox" id=\"' + i + '\" class="custom" /><label for=\"' + i + '\">'+i+'</label>').trigger('create');
}
$('input: checkbox').checkboxradio("refresh");

Answer 1

Try using document ready and change selector at last line to ":checkbox"

$(document).ready(function(){
   $('#editattendancecontent').append('<p>Who Attended?</p><form id="editattendanceform"><div data-role="fieldcontain"><fieldset data-role="controlgroup" id="editattendancelist"></fieldset></div><input type="submit" value="Save Attendance" data-inline="true" /></form>');
for (var i = 0; i<5; i++)
{
    $('#editattendancelist').append('<input type="checkbox" id=\"' + i + '\" class="custom" /><label for=\"' + i + '\">'+i+'</label>').trigger('create');
}
$(':checkbox').checkboxradio("refresh")

});