jQuery mobile 手動建立form元素

2012年3月19日

jQuery mobile 手動建立form元素

jQuery Mobile dynamic form element
(動態載入表單元素)

簡介

jQuery Mobile是jQuery團隊針對移動裝置所開發的一款For Mobile Device Library，其主旨仍然與jQuery不變，即『寫得少、做的多』。

詳細介紹參考 jQueryMoblie

問題

我們時常會使用ajax動態將資料組裝成Html元件並載入頁面，但在jQueryMobile中，每個頁面只會在pagecreate時將html標籤屬性帶有其認知者修改為jQueryMobile的UI元素，這些屬性包含data-role, data-rel等，在已經固定的html頁面中所有元素都會被初始化，但若為ajax後來加入的元素會發生甚麼事情呢?
如下圖例

〈不正確的UI〉

那該怎麼重新觸發jQueryMobile重新render呢!?

解決辦法

其實解決方法很簡單，只需要在append(或是其它操控Append DOMTree方法)之後加入trigger('create');就可以使jQueryMobile再次的對該元素重新進行UI的建構。

$('me-header').append(retData).trigger('create');