Question

i have a problem in grouping a dynamically generated radio buttons into a jQuery Mobile control group, i generate the radio buttons and append them into a but they are dispalayed separetly although there warping contains a ‘controlgroup’ data-role, here’s my HTML:

<div data-role="collapsible" data-inset="true">
    <h1>AddVote</h1>
   <div data-role="fieldcontain" >
   <form id="voting" action="get">
      <label for="name">&nbsp;&nbsp;&nbsp;&nbsp;<strong>Question:</strong></label>
<input type="text" name="name" id="name" value=""  /><br>

 <label for="name"><div id="AddButton" data-role="button" data-inline="true">AddOptions</div></label>

<input type="text" name="option" id="option" value=""  /><br>
<div id="RemoveButton" data-role="button" data-inline="true">RemoveOptions</div>




  <div  data-role="fieldcontain">
<fieldset data-role="controlgroup">
    <legend>&nbsp;&nbsp;&nbsp;&nbsp;<strong>Choose an Option:</strong></legend><br><br>
     <fieldset data-role="controlgroup">
    <div id="after" data-role="controlgroup" >

     ///////////////////////Generated radio buttons goes here//////////////////////
    </div>
    </fieldset>
    </fieldset>


  </div>
    </div>
   <a href="#" data-role="button" data-inline="true" >Publish</a>
    </form>

and here’s the script code:

function createRadioElement(elem, label, checked) {
var id = 'option1_' + label;

$('#after').append($('<input />', {
    'type': 'radio',
    'name': 'option1',
    'id': id,
    'data-role': 'controlgroup',
    'data-theme':'e',
    'value': '1'

 }));
$('#after').append('<label for="' + id + '">' 
                    + label + '</label><br />').trigger('create');

     }

$( '#admin' ).live( 'pageinit',function(event){
 $('#AddButton').click(function(){
var x = document.getElementById('option').value;     
createRadioElement(this,$('#option').val(),true);

});

Answer 1

Perhaps I don’t understand the question correctly but is it the <br /> between the radiobuttons that concerns you? If this is the case then just replace this:

$('#after').append('<label for="' + id + '">' 
                    + label + '</label><br />').trigger('create');

with this:

$('#after').append('<label for="' + id + '">' 
                    + label + '</label>').trigger('create');

Also I believe that your <form> and <div> tags are incorrectly nested.