附加表单和元素jQuery Mobile

Question

你好我想附加一个表单和复选框元素，但表单正在失去它的风格。复选框应该组合在“列表”中，按钮保存出勤应该根据jquery Mobile设置样式。

我该如何解决这个问题？

它的外观如下：

代码：

$('#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 < json.length; i++)
{
    $('#editattendancelist').append('<input type="checkbox" id=\"' + json[i].userID + '\" class="custom" /><label for=\"' + json[i].userID + '\">'+json[i].name+'</label>').trigger('create');

}
$('input: checkbox').checkboxradio("refresh");

Answer 1

解决方案

两件事：

1. 您需要删除trigger("create")调用，这是您在每次循环数据时所执行的操作，这是完全错误的。应该在动态内容的父级上调用此函数。
2. 由于您有多个需要增强，按钮，复选框等的项目，因此使用trigger("create")比逐个增强组件更好。

如果您在加载页面时这样做，我希望您使用pageinit。

代码

完成所有这些更改后，

加价：

<div data-role="page" id="mypage">
    <div data-role="header" data-theme="a">
         <h1></h1>
    </div>
    <div data-role="content" id="editattendancecontent"></div>
<div>

<强> JS

//pageinit method of the page
$(document).on("pageinit", "#mypage", function () {
    var json = [
        {
        userID: Math.random(),
        name: "Roger"
        }, 
        {
        userID: Math.random(),
        name: "Summer"
        }, 
        {
        userID: Math.random(),
        name: "William"
        }, 
        {
        userID: Math.random(),
        name: "Sunny"
        }, 
        {
        userID: Math.random(),
        name: "Walter"
        }
    ];

    console.log(json);

    $('#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 < json.length; i++) {
        $('#editattendancelist').append('<input type="checkbox" id="' + json[i].userID + '" class="custom" /><label for="' + json[i].userID + '">' + json[i].name + '</label>') //removed trigger("create");

    }
    $(this).trigger("create"); //where $(this) is the page - you can also call it on $("#editattendancecontent"). That'll also work
});

演示

http://jsfiddle.net/hungerpain/HMQf7/1/