1. 首頁
  2. 問答
  3. jQuery Mobile在更新DOM後丟失樣式

jQuery Mobile在更新DOM後丟失樣式

2012-06-12 34 views
2

與此類似的問題已發佈多次，但我無法找到可行的解決方案。希望有人能幫助！jQuery Mobile在更新DOM後丟失樣式

我使用的是jQuery Mobile 1.1和jQuery 1.7.2，所以我在最新的穩定版本上。我想創建一個動態頁面標題。使用這個HTML代碼，它工作正常：

<div data-role="page" id="levela"> 
    <div data-role="header" id="hdr_levela"> 
    <h1>Title</h1> 
    </div> 
</div>

所以我然後去動態創建標題。我更改HTML這樣：

<div data-role="page" id="levela"> 
    <div data-role="header" id="hdr_levela"> 
    </div> 
</div>

，並添加下面的jQuery代碼：

// Set the header 
var dirHeader = $('#hdr_levela'); 
dirHeader.append('<h1>' + title+ '</h1>');

標題出現，但並不風格。我發現了幾個關於此的帖子。在jQuery Mobile文檔中，它說：

「但是，如果您通過Ajax生成新標記客戶端或通過Ajax加載內容並將其注入頁面，則可以觸發create事件來處理自動初始化所有插件包含在新的標記中，這可以在任何元素（甚至是頁面div本身）上觸發，爲您節省了手動初始化每個插件（列表視圖按鈕，選擇等）的任務

例如，如果通過Ajax加載了一段HTML標記（稱爲登錄表單），則觸發create事件以將其包含的所有小部件（本例中爲輸入和按鈕）自動轉換爲增強版本。 ：

$(...new markup that contains widgets...).appendTo(".ui-page").trigger("create");

所以我嘗試了幾件事。在上面的代碼後，我添加了以下內容：

dirHeader.trigger("create");

這沒有效果。所以我試圖把它放在實際的追加本身上：

dirHeader.append('<h1>' + folderName + '</h1>').trigger("create");

這沒有效果。然後我嘗試了父元素上的過程（在這種情況下，父div的id是「levela」）。所以，我想這一點：

$('#levela').trigger("create");

這也沒有影響。在這一點上，我完全失去了。每個解決方案都涉及到我嘗試過的一些事情，而且只是無法正常工作。我必須失去一些非常基本的東西，但我似乎無法找到它。

在此先感謝您的幫助！

來源

2012-06-12 user1452076

回答

2

可以通過調用.page更新內容：

看到這個working Fiddle例子！

// Set the header 
var title  = 'super hyper BuBu', 
    $dirHeader = $('#hdr_levela'); 


$dirHeader.append('<h1>' + title+ '</h1>').page();

來源

2012-06-12 20:25:19 Zuul

+0

謝謝！但解決方案有點深入。您的解決方案在小提琴示例中完美運行，但對我無效。我挖得更深一點，發現小提琴示例不使用jQuery Mobile 1.1，而是使用1.0版本。這就是訣竅 - page（）似乎不適用於1.1。當我降級jQuery Mobile時，效果很好。謝謝你的幫助！！ – user1452076

+0

Yap，無法使小提琴與您的jQuery Mobile版本一起工作，假設了一個jsFiddle問題......所以要準備一個示例，我已經使用了一個早期版本！很高興，最終這解決了你的問題:) – Zuul

相關問題

 相關問題