在jQuery Mobile中添加動態內容時正確格式化

我試圖動態地將一些內容添加到jQuery Mobile中可摺疊<li>項目中的複選框列表。我不能用漂亮的圓角和分組項目得到正確的格式。當我在葉級別添加其他元素時，情況會變得更糟。在jQuery Mobile中添加動態內容時正確格式化

Here是顯示問題（添加jQuery和jquerymobile腳本和CSS在標題很明顯）的例子：我試過，來電後添加.page()到append()

<body> 
<div data-role="page" id="page"> 
    <ul id="listList" data-role="listview"> 
    <li id="list1" data-role="collapsible"> 
    <h3>list 1</h3> 
    <div data-role="fieldcontain"> 
    <fieldset data-role="controlgroup" id="fs1"> 
     <input type="checkbox" id="cb1" /><label for="cb1">text</label></fieldset></div></li> 
    <li id="list2" data-role="collapsible"> 
    <h3>list 2</h3> 
    <p>here comes another list of checkboxes...</p></li></ul> 
<input type="button" onclick="addCheckbox();" value="add a checkbox to list1" /></div> 
</body> 
<script> 
function addCheckbox() { 
    $("#list1 fieldset").append('<input type="checkbox" id="cb2" /><label for="cb2">More text</label>'); 
} 
</script>

，但它不能正常工作，雖然好一些。

除了我的例子，通用的問題是如何在jQuery Mobile使用DOM結構後動態地將內容追加到DOM樹中。我相信存在一個「jquerymobilizes」部分樹的功能，但我找不到它。

非常感謝您的幫助！

編輯：總之，我想動態添加元素融入listview的一個<li>元素，而不是試圖元素添加到列表本身。刷新listview在這裏似乎沒有幫助。

編輯2：我得到一個有點接近，因爲我找到了.trigger("create")功能，可以鏈接到.append()（CF JQM FAQ）。使用下面的腳本，雖然data-role="controlgroup"沒有提供正確的格式與漂亮的圓角框，但它的效果稍好。

$("#list1 fieldset").append('<input type="checkbox" id="cb2" /><label for="cb2">More text</label>').trigger("create");

我將發佈完整的答案，如果我在某些時候到達那裏。

編輯3：這是我的例子jsFiddle

來源

2012-02-26 Mad Echet

PS：我也想知道爲什麼複選框似乎被禁用，並且在我的例子中默認情況下可摺疊項目沒有摺疊，但這是次要的。 – 2012-02-26 20:31:58

我想我可以回答我的問題所以這裏是我得到：

動態地在jQuery Mobile的添加元素使用.trigger("create")（參見jQuery Mobile FAQ）
將它們添加到一個收縮元件的可摺疊部分將它添加到div.ui-collapsible-content或可摺疊部分事前內創建一個div容器，所以你添加的內容，直接出現
得到的分組的漂亮渲染複選框，應立即添加所有複選框（我不能得到圓滑的圓角，當我加入他們依次

因此，這裏是我最後的腳本，做我需要的東西：

$("#list1 div[data-role='fieldcontain']").append('<fieldset data-role="controlgroup">' 
    +'<input type="checkbox" id="cb1" /><label for="cb1">text</label>' 
    +'<input type="checkbox" id="cb2" /><label for="cb2">More text</label></fieldset>' 
    +'<a href="index.html" data-role="button" data-icon="delete">Delete</a>') 
    .trigger("create");

我希望它有幫助！

來源

2012-02-27 09:41:54

這是我在http://jsfiddle.net/hbbvM上的工作示例 – 2012-02-27 11:56:26

不太清楚我按照說明。你是否正在尋找更多如何應用適當的風格。如果是這種情況，您將需要使用：

$('#mylist').listview('refresh');

這會在您將新項目添加到列表後。

來源

2012-02-27 02:11:41 imaginethepoet

謝謝，但問題是，jquery mobile會在頁面加載時創建一系列容器並重新組織元素。當我動態地添加新的jQuery元素（在這種情況下，輸入複選框及其標籤），重組從不發生，因此醜陋的演示。刷新工作在列表視圖上，但在我的示例中，問題來自輸入複選框，我沒有將任何項目添加到列表中，而是將項目附加到列表中某個項目的可摺疊部分。 – 2012-02-27 09:05:33

這個問題是因爲，在將動態內容附加到listview之後，jquery移動類可能不會應用您的listview。所以嘗試以下任何

$('#listList').listview('refresh'); //which refresh your list view 
$('#listList').listview('refresh',true); //which rebuilds the listview with your new content

來源

2012-02-27 04:01:45

謝謝，但正如我試圖在另一個評論中解釋的，我不添加元素到列表視圖，而是將項目追加到div的一個元素的可摺疊部分。刷新列表視圖在這裏似乎沒有任何幫助。 – 2012-02-27 09:08:53

@Mad Echet：我認爲你的onclick事件不會觸發函數「addCheckbox（）」。你可以通過在你的函數代碼的第一行放置警報來檢查這一點...你可以在這裏檢查你的例子[link] http://jsfiddle.net/reddyprasad321/wECQx/5/ – 2012-02-27 09:52:38

謝謝你看看，我不'不知道爲什麼這個事件沒有在你的例子中觸發（我對jsfiddle不熟悉），但是對於我來說開火併不是問題（文本被正確添加，但格式化丟失）。我將嘗試在jsfiddle中發佈一個工作示例，但您可以在我的答案中找到我的解決方案。 – 2012-02-27 10:46:13

在jQuery Mobile中添加動態內容時正確格式化

回答

相關問題