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

Question

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

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

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

当动态添加元素时，我找不到重新初始化列表以将样式应用于所有内容的正确方法，fieldcontain div标签和textarea。

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

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

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

Answer 1

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

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

创建与刷新：一个重要的区别

请注意，某些小部件具有的create event和refresh方法之间存在重要差异。 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 个解决方案

解决方案1
1 已采纳 2012-01-12 15:43:28

解决方案2
1 2012-01-12 15:53:05

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2012-01-12 15:43:28

解决方案2 1 2012-01-12 15:53:05

解决方案1
1 已采纳 2012-01-12 15:43:28

解决方案2
1 2012-01-12 15:53:05