如何讓jQuery Mobile在生成的代碼上重新執行？

Question

我想用Javascript生成一些jQuery Mobile元素。在javascript運行並將生成的元素放置在myTest div中後，樣式和腳本不會像靜態內容那樣附加。有沒有什麼辦法讓jQuery在生成的代碼上執行？

下面是一個例子：

標記：

<!-- Does not look correct when populated --> 
<div id="myTest"> 
</div> 

<!-- Looks correct --> 
<div data-role="collapsible-set" data-theme="d" data-content-theme="d" data-mini="true" data-corners="false"> 
    <div data-role="collapsible"> 
    <h3>Test</h3> 
    </div> 
</div> 

腳本：

$(document).ready(onloadFunc); 

function onloadFunc() { 
    var parent = $('<div data-role="collapsible-set" data-theme="d" data-content-theme="d" data-mini="true" data-corners="false">'); 
    var item = $("<h3>").html("test"); 
    parent.append(item); 
    $("#myTest").append(parent); 
} 

鏈接的jsfiddle：http://jsfiddle.net/DcFhj/

Answer 1

首先您的標記實際上是稍微偏離時，collapsible-set小部件是爲了包含它內部sev可口可摺疊的小部件。

例如（來自documentation截取）

<div data-role="collapsible-set"> 
    <div data-role="collapsible" data-collapsed="false"> 
    <h3>Section 1</h3> 
    <p>I'm the collapsible set content for section 1.</p> 
    </div> 
    <div data-role="collapsible"> 
    <h3>Section 2</h3> 
    <p>I'm the collapsible set content for section 2.</p> 
    </div> 
</div> 

有從jQuery Mobile文檔看看下面question。一般來說，爲了增強動態插入的標記，您必須在標記上初始化小部件，或者您可以觸發父元素上的create事件，並且jQuery Mobile應初始化所有適當的小部件。

在這種情況下是，你只需要一個小工具，你只需要初始化collasible小部件（也足夠有趣這與您的當前標記）

$("#myTest").append(parent).find('div').collapsible(); 

http://jsfiddle.net/DcFhj/3/

例如，如果你有幾個需要增強功能的小部件（或者只是爲了簡單起見），你可以觸發create方法（這不適用於你當前的標記，但是如果你改正它的話）。

$("#myTest").append(parent).trigger('create'); 

http://jsfiddle.net/DcFhj/4/