jQuery Mobile：listview（刷新）div標籤？

Question

我很喜歡jQuery手機（和JS :)的新手，如果我說的東西看起來太簡單，那就不好意思。我已經通過互聯網搜索了兩天，並沒有找到解決方案。

我想知道是否有一些功能與$（＃someList）.listview（'refresh'）相同，但對於div標籤。我有兩個div標籤，當我改變它的內容時，他們就失去了造型。

代碼：

function muestraFicha() { 
    var categoriaFicha = "Ciencia/Matemáticas"; 
    var preguntaFicha = "Si un tren eléctrico sale de Valencia dirección Barcelona a 60Km/h con viento norte de 30Km/h ¿Hacia qué dirección saldrá el viento de su chimenea?"; 
    var respuestaFicha = "En ninguna dirección, es un tren eléctrico y por lo tanto no despide humo"; 
    var divRespuesta = "<div data-role='collapsible' data-theme='b' data-content-theme='c'>" 

    $("#fichaRespuesta").empty(); //vaciamos la ficha 
    $("#fichaRespuesta").append("<h4> Respuesta </h4>"); 
    $("#fichaRespuesta").append("<p>" + respuestaFicha + "</p>"); 

    $("#fichaPregunta").empty(); 
    $("#fichaPregunta").append("<h3>" + categoriaFicha + "</h3>"); 
    $("#fichaPregunta").append("<p>" + preguntaFicha + "</p>"); 
} 

所以，在函數結束時，我需要的東西的.listview（「刷新」）或HTML只稱呼第一次函數被調用。

失去風格的div是fichaRespuesta和fichaPregunta。

謝謝。

Answer 1

如果你想擁有jQuery Mobile的樣式進行任何新的DOM元素，你可以使用.trigger('create');功能：

新的「創建」事件：輕鬆提高所有工具在一次

雖然頁面插件不再專門調用每個插件，它 不派遣「pagecreate」事件，大多數小部件使用它來自動初始化自己。只要插件腳本 被引用，它就會自動增強它在頁面上找到的小部件 的任何實例，就像以前一樣。例如，如果加載了選擇菜單 插件，它將增強在新創建的頁面 中找到的所有選擇。

此結構現在允許我們添加一個新的創建事件，該事件可以在任何元素上觸發，可以爲 ，從而爲您節省手動初始化包含在該元素中的每個插件的任務 。到目前爲止，如果開發者 通過Ajax或動態生成的標記加載內容，他們需要手動初始化所​​有包含的插件（列表視圖按鈕， select等）以增強標記中的小部件。

現在，我們方便的創建事件將初始化該標記內所有必需的插件 ，就像頁面創建增強 過程的工作方式一樣。如果您要使用Ajax加載HTML 標記塊（例如登錄表單），則可以觸發創建以自動將其包含的所有小組件（此 個案中的輸入和按鈕）轉換爲增強版本。此場景的代碼爲：

$（...包含小部件的新標記...）.appendTo（「.ui-page」 ）.trigger（「create」）;

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

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

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

鏈接到以上信息：http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/

此外，我注意到您使用的是相同的選擇連續，可以極大地鏈接在一起，選擇呼叫，像這樣提高代碼的性能：

變化：

$("#fichaRespuesta").empty(); //vaciamos la ficha 
$("#fichaRespuesta").append("<h4> Respuesta </h4>"); 
$("#fichaRespuesta").append("<p>" + respuestaFicha + "</p>"); 

$("#fichaPregunta").empty(); 
$("#fichaPregunta").append("<h3>" + categoriaFicha + "</h3>"); 
$("#fichaPregunta").append("<p>" + preguntaFicha + "</p>"); 

要：

$("#fichaRespuesta").empty().append("<h4> Respuesta </h4><p>" + respuestaFicha + "</p>"); 

$("#fichaPregunta").empty().append("<h3>" + categoriaFicha + "</h3><p>" + preguntaFicha + "</p>"); 

注意我刪除了其中一個.append()調用，因爲它會創建額外的開銷來連續調用兩次;相反，我在一次調用中將兩個.append()調用的HTML放在一起。

如果你真的想進入使你的代碼的性能提高，緩存中的選擇，使他們只需要被查到的一次，就像這樣：

var $fichaRespuesta = $('#fichaRespuesta'), 
    $fichaPregunta = $('#fichaPregunta'); 
function muestraFicha() { 
    /*I removed your extra code to make this easier to read*/ 

    $fichaRespuesta.empty().append("<h4> Respuesta </h4><p>" + respuestaFicha + "</p>"); 

    $fichaPregunta.empty().append("<h3>" + categoriaFicha + "</h3><p>" + preguntaFicha + "</p>");