将表单和输入附加到表单jQuery Mobile

Append Form And Input To Form jQuery Mobile

本文关键字:表单 jQuery Mobile 输入      更新时间:2023-09-26

我正在使用jquery mobile将基于ajax调用返回的数据的复选框附加到表单中。当我附加表单及其元素时,表单将失去所有样式。复选框应该附加在一起,提交按钮也有不同的样式。

jsFiddle示例

JS代码:

$('#editattendancecontent').append('<p>Who Attended?</p><form id="editattendanceform"><div data-role="fieldcontain"><fieldset data-role="controlgroup" id="editattendancelist"></fieldset></div><input type="submit" value="Save Attendance" data-inline="true" /></form>');
for (var i = 0; i<5; i++)
{
    $('#editattendancelist').append('<input type="checkbox" id='"' + i + ''" class="custom" /><label for='"' + i + ''">'+i+'</label>').trigger('create');
}
$('input: checkbox').checkboxradio("refresh");

尝试使用文档就绪并将最后一行的选择器更改为":checkbox"

$(document).ready(function(){
   $('#editattendancecontent').append('<p>Who Attended?</p><form id="editattendanceform"><div data-role="fieldcontain"><fieldset data-role="controlgroup" id="editattendancelist"></fieldset></div><input type="submit" value="Save Attendance" data-inline="true" /></form>');
for (var i = 0; i<5; i++)
{
    $('#editattendancelist').append('<input type="checkbox" id='"' + i + ''" class="custom" /><label for='"' + i + ''">'+i+'</label>').trigger('create');
}
$(':checkbox').checkboxradio("refresh")
});