如何将动态生成的单选按钮分组到jQuery Mobile中的“控制组”中

时间:2012-03-06 18:42:25

标签: javascript jquery jquery-mobile

我在将动态生成的单选按钮分组到jQuery Mobile控制组时遇到问题,我生成单选按钮并将它们附加到a中但是它们是分散的,尽管有一个变形包含一个' controlgroup' data-role,这是我的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>

以及脚本代码:

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);

});

1 个答案:

答案 0 :(得分:1)

也许我没有正确理解这个问题,但是关注你的无线电按钮之间是<br />吗?如果是这种情况,那么只需替换它:

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

用这个:

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

另外,我认为您的<form><div>标记嵌套不正确。