追加表单和元素 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/