如何讓jquery mobile在類列表視圖中添加動態添加的表單字段的類？

我很努力讓JQM重新初始化一個包含表單字段的列表視圖的jQuery頁面。如何讓jquery mobile在類列表視圖中添加動態添加的表單字段的類？

其中一個表單元素被初始化爲JQM的正常初始化過程的一部分，即正確顯示所有正確的類應用於所有元素。

其餘的人全動態添加使用JQ的追加

當元素添加動態我無法找到重新初始化列表樣式應用到一切正確的方法，在fieldcontain的div標籤& textarea的。

我準備了一個例子來展示不同的方法來重新初始化我嘗試過的基於SO和網絡上其他問題的元素。

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

在我的例子，第5行被正確初始化，但是它需要調用fieldcontain()方法textinput()方法和手動ui-input-label類添加到標籤。這感覺像是一個很大的混亂，我一定會錯過一些東西。

來源

2012-01-12 Rob

觸發一個頁面像這樣上創建事件：

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

創建與刷新：一個重要的區別

注意，還有就是創建事件之間的重要的區別刷新方法一些小部件。創建事件適用於增強包含一個或多個小部件的原始標記。刷新方法應在已編程編程的現有（已增強）小部件上使用，並且需要更新UI以匹配。

舉例來說，如果你有一個頁面，您可以動態附有數據角色=創建頁面後列表視圖屬性，觸發創建列表的父元素在新無序列表將改變它成風格的列表視圖小部件。如果以編程方式添加更多列表項目，則調用列表視圖的刷新方法會將這些新列表項目更新爲增強狀態，並保留現有列表項目不變。

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

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

來源

2012-01-12 15:43:28 user700284

謝謝，創建方法是魔術方法。 – Rob 2012-01-12 16:20:37

工作實例：

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

$('#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

來源

2012-01-12 15:53:05

感謝關於jQ的說明1.6.4 – Rob 2012-01-12 16:11:18

1.7爲我喜歡的事件處理增加了一些令人滿意的好處，如果某些事情開始感覺中斷，我會考慮1.6.4的要求。到目前爲止，我還沒有發現任何問題。感謝你的回答。 – Rob 2012-01-12 16:37:51

是的，我認爲jQM 1.1將支持jQuery 1.7.x – 2012-01-12 17:07:13

如何讓jquery mobile在類列表視圖中添加動態添加的表單字段的類？

回答

相關問題