删除动态生成的单选按钮的问题

时间:2012-03-08 10:06:31

标签: javascript jquery dom jquery-mobile

我正在异步创建2页动态单选按钮,即我有一个表单,用户必须输入一个轮询并生成许多单选按钮作为选项来回答问题(第一页),当用户输入完数据时,他必须查看他输入的内容摘要(第二页),现在它工作正常,但当用户返回第一页(编辑他的选项)如果他删除了他的任何选项,它不会从第二页删除,请在此处查看我的HTML和脚本代码http://jsfiddle.net/Mnqc7/6 谢谢

<!--First page-->

 <div data-role="header">
 </div><!-- /header -->

    <div data-role="content"> 
    <div data-role="collapsible" data-inset="true">
    <h1>AddPoll</h1>
   <div data-role="fieldcontain" >
   <label for="name">&nbsp;&nbsp;<strong>Question:</strong></label>
<input type="text" name="name" id="question" value=""  /><br>

            AddDelete                          
                                

      <!--Generated radio buttond goes here-->
    </div>
    </form>
    </div>
   <a href="#approve" id="publish" data-role="button" data-inline="true" data-transition="flip">Preview</a>
     </div><!-- /content -->
   <!-- </fieldset>-->
    <div data-role="footer" data-position="fixed" data-id="ew-footer" class="ui-splitview-hidden">
    </div><!-- /footer -->
        </div><!-- /page -->
        <!--Second page-->
        <div data-role="page" id="approve" data-theme="a" class="page" >
      <div data-role="header">
    </div><!-- /header -->

    <div data-role="content"> 
     <h1 id="headTitle"></h1>
<div id="Inserthere" data-role="controlgroup">
    <!--Generated radio buttond goes here--> 

</div>
<a href="#admin" id="" data-role="button" data-inline="true" data-transition="flip">Back</a>
    </div><!-- /content -->
    <div data-role="footer" data-position="fixed" data-id="ew-footer" class="ui-splitview-hidden">
     </div><!-- /footer -->
  </div><!-- /page -->           

脚本:

function createRadioElementForFirstPage(elem, label, checked) {
var id = 'option1_' + label;
   $('#after').append($('<input />', {
    'type': 'radio',
    'fieldset':'group',
    'name': 'option1',
    'id': id,
    'data-role': 'controlgroup',
    'data-theme':'b',
    'value': '1'}));
  $('#after').append('<label for="' + id + '">'+ label + '</label>').trigger('create');}
  function createRadioFortSecondPage(elem, label, checked) {
  var id = 'option1_' + label;
   $('#Inserthere').append($('<input />', {
    'type': 'radio',
    'fieldset':'group',
    'name': 'option1',
    'id': id,
    'data-role': 'controlgroup',
    'data-theme':'b',
    'value': '1'}));
 $('#Inserthere').append('<label for="' + id + '">'+ label + '</label>').trigger('create');}

function createRadioFortSecondPage(elem, label, checked) {
var id = 'option1_' + label;
   $('#Inserthere').append($('<input />', {
    'type': 'radio',
    'fieldset':'group',
    'name': 'option1',
    'id': id,
    'data-role': 'controlgroup',
    'data-theme':'b',
    'value': '1'}));
$('#Inserthere').append('<label for="' + id + '">'+ label + '</label>').trigger('create');}


 function insertIntoPreviewPage(){
     var labels = [];
      $('#after input[type=radio]').each(function() {
     labels.push($('label[for='+$(this).attr('id')+']').text());

    createRadioFortSecondPage('#approve',labels[i],true);
    });}

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

 }}); 
$('#RemoveButton').click(function(){


var id = $('#after').children().children("input[checked='checked']").get(0).id;
$('#after').children().children("input[checked='checked']").parent().remove()
approve.$("#" + id).parent().remove(); }}); 

$('#publish').click(function(){

    var y=document.getElementById('question').value
    var form='<value="' + y + '"'+'/>'
    var labels = [];    
$('#after input[type=radio]').each(function() {
     labels.push($('label[for='+$(this).attr('id')+']').text());
  });
    for(var i=0;i<labels.length;i++){
        form+='\n<opt value="' + labels[i] + '"'+'/>'
    createRadioFortSecondPage('#approve',labels[i],true);    
    }

    alert(form);
   document.getElementById('headTitle').innerHTML=y;
     });

0 个答案:

没有答案