JQuery Mobile Radio has several styles

Question

These two jQuery Mobile checkboxes have different styles, but I believe that I create them in very similar ways. In the upper drawers I add dynamically where the lower drawer is hardcoded. Does anyone know why this is a mismatch in styles?

Div to hold a set of fields

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

Adding 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 update the style:

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

Answer 1

All your CSS doesn't apply when you dynamically load the top two.

Add .trigger("create") to the element that adds content.

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

UPDATE

However, if you create a new markup on the client side or load content through Ajax and enter it into the page, you can trigger the create event to handle automatic initialization for all plugins contained in the new markup. This can work on any element (even on the div page), saving you the task of manually initializing each plugin (list button, select, etc.).

For example, if an HTML markup block (for example, a login form) was loaded via Ajax, it fires a create event to automatically convert all the widgets contained in it (inputs and buttons in this case) into advanced versions. Code for this script:

 $( ...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 JSfiddle to illustrate the solution. I did all this on my iPad (welcome), so if this works for you, PLEASE at least mark it as the correct answer lol. Here's a link (based on adding switches with a click of a button)

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