Question

我正在努力让JQM重新初始化一个包含表单字段的listview的jquery页面。

其中一个表单元素被初始化为JQM正常初始化过程的一部分，正确显示所有元素应用于所有元素。

其他都是使用JQ的附加动态添加的

当动态添加元素时，我无法找到重新初始化列表以将样式应用于所有内容的正确方法，fieldcontain div the label＆amp; textarea。

我准备了一个示例来展示根据在SO和网络上发现的其他问题重新初始化我尝试的元素的不同方法。

http://jsfiddle.net/robaldred/UPsQr/

在我的示例中，第5行正确初始化，但是需要使用fieldcontain()方法调用textinput()方法并手动将ui-input-label类添加到标签中。这感觉很麻烦，我必须遗漏一些东西。

Answer 1

在页面上触发创建事件，如下所示：

$("#page").trigger("create");

创建与刷新：重要区别

请注意，有一个   创建事件和刷新方法之间的重要区别   一些小部件有。 create事件适用于增强原始标记   包含一个或多个小部件。应该使用刷新方法   在已经被操纵的现有（已经增强的）小部件上   以编程方式，需要更新UI以匹配。

例如，如果您有一个动态添加新页面的页面   页面创建后带有data-role = listview属性的无序列表，   在该列表的父元素上触发create会对其进行转换   进入listview风格的小部件。如果有更多的列表项   以编程方式添加，调用listview的refresh方法   将这些新列表项更新为增强状态并离开   现有的清单项目未受影响。

参考：http://jquerymobile.com/demos/1.0/docs/pages/page-scripting.html

更新了您的小提琴 - http://jsfiddle.net/UPsQr/2/

Answer 2

工作示例：

http://jsfiddle.net/UPsQr/4/

JS

$('#add_element').click(function() {
    var list   = $('ul[data-role="listview"]');
    var nextLi = ((list.children().length) + 1);

    li = '<li><div data-role="fieldcontain"><label for="textarea'+nextLi+'">Input:</label><textarea id="textarea'+nextLi+'" name="textarea'+nextLi+'"></textarea></div></li>';
    list.append(li);
    list.listview('refresh');

    $('#page').trigger('create');
});

//$('#add_element').hide();

HTML

<html>
    <head>
    </head>
    <body>
        <div id="page" data-role="page">
            <!-- First field is done by jQM's normal initialization -->
            <!-- The Rest are added onload and appended to the listview -->
            <ul data-role="listview">
                <li>
                    <div data-role="fieldcontain">
                        <label for="textarea1">Input:</label>
                        <textarea id="textarea1" name="textarea1"></textarea>
                    </div>
                </li>
            </ul>
            <a data-role="button" id="add_element">Add Fields</a>
        </div>
    </body>
</html>

注意：

jQM支持jQuery 1.6.4

如何告诉jquery mobile将类添加到listview中动态添加的表单字段？

2 个答案: