已添加Ajax HTML不會繼承頁面樣式 - jQueryMobile

Question

所以我對jQueryMobile相當新，但是我設法創建了一個搜索欄，可以在使用Ajax進行輸入時顯示結果，這很好，但問題是該CSS樣式不適用於ajax'd內容。

有沒有一種方法可以強制CSS來刷新或重新緩存或只是將CSS應用於新的ajax'd html？

Answer 1

加強新的標記
頁面插件調度pagecreate事件，其中大部分部件使用自動初始化自己。只要引用了小部件插件腳本，就會自動增強 在頁面上找到的小部件的任何實例。

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

例如，如果HTML標記（比如登錄表單）的塊是在通過Ajax加載 ，觸發創建事件來自動變換 所有它包含（這種情況下的輸入和按鈕）的微件進入 增強版本。此方案的代碼將是：

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

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

舉例來說，如果你有一個頁面，您可以動態追加新的 無序列表data-role=listview屬性 頁面創建後，觸發創建列表的父元素將 將其轉化爲一個ListView控件樣式。如果更多列表項是 ，然後以編程方式添加，調用列表視圖的刷新方法 會將這些新列表項更新爲增強狀態，並保留 未更改的現有列表項。

JQM文檔這裏：

• http://jquerymobile.com/demos/1.0.1/docs/pages/page-scripting.html

刷新表單元素
在jQuery的移動，一些增強表單控件風格簡單的（輸入），但其它的自定義 控制（選擇，滑塊）從本地連接構建並與其保持同步 本地連接列伊。要以編程方式更新帶有JavaScript的表單控件，請首先操作本機控件，然後使用刷新方法告訴增強型控件自行更新以匹配新的 狀態。下面是關於如何更新公共表單控件的一些例子， 然後調用刷新方法：

複選框：

$("input[type='checkbox']").prop("checked",true).checkboxradio("refresh"); 

收音機：

$("input[type='radio']").prop("checked",true).checkboxradio("refresh"); 

選擇：

var myselect = $("#selectfoo"); 
myselect[0].selectedIndex = 3; 
myselect.selectmenu("refresh"); 

滑條：

個

$("input[type='range']").val(60).slider("refresh"); 

翻轉開關（他們使用滑塊）：

var myswitch = $("#selectbar"); 
myswitch[0].selectedIndex = 1; 
myswitch.slider("refresh"); 

JQM文件的位置：

• http://jquerymobile.com/demos/1.0.1/docs/forms/docs-forms.html