如何告訴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