我正在异步创建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"> <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;
});