Question

These two jQuery Mobile checkboxes have different styling, however I believe I am creating them in very similar ways. The top boxes I am appending dynamically, where as the bottom box is hardcoded. Does anybody know why this is this discrepancy in styles?

Div to hold fieldset

<fieldset id="surveyViewer" data-role="controlgroup">
  </fieldset>

Appending radio buttons

$('#surveyViewer').append('<legend>Survey Preview:</legend><input type="radio" name="options" id="1" value="1" /><label for="1">1</label><input type="radio" name="options" id="2" value="2" /><label for="2">2</label>');

This line to refresh styling:

$('#surveyViewer').trigger("create");
$("input[type='radio']").checkboxradio("refresh");

Answer 1

All of your CSS is not being applied when you are dynamically loading the top two.

Add .trigger("create") on the element that gets the content added to.

See here: jQuery Mobile does not apply styles after dynamically adding content

UPDATE

However, if you generate new markup client-side or load in content via
Ajax and inject it into a page, you can trigger the create event to
handle the auto-initialization for all the plugins contained within
the new markup. This can be triggered on any element (even the page
div itself), saving you the task of manually initializing each plugin
(listview button, select, etc.).

For example, if a block of HTML markup (say a login form) was loaded
in through Ajax, trigger the create event to automatically transform
all the widgets it contains (inputs and buttons in this case) into the
enhanced versions. The code for this scenario would be:

$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );

UPDATE #2

// HTML
<a id="myButton" href="" data-role="button" data-theme="e">Add Radio</a>

<div id="radiodiv1">
<fieldset id="surveyViewer" data-role="controlgroup"></fieldset>
</div>

// JS 
$( "#myButton" ).bind( "click", function(event, ui) {

     $("#surveyViewer").append('<legend>Survey Preview:</legend><input type="radio" name="options" id="1" value="1" /><label for="1">1</label><input type="radio" name="options" id="2" value="2" /><label for="2">2</label>');

     $("#radiodiv1").trigger("create");

});

I created a JSfiddle to illustrate a solution. I did all this on my iPad (you’re welcome) so if this works for you, PLEASE at least mark it as the correct answer lol. Here’s the link (based on adding the radio buttons via a button click)

WORKING EXAMPLE: http://jsfiddle.net/nsX2t/