jQuery Mobile頁面在第一次點擊後失去它的可摺疊性

我在過去幾天試圖瞭解jQuery Mobile似乎正在做的這種奇怪的行爲。jQuery Mobile頁面在第一次點擊後失去它的可摺疊性

我有一個項目列表，列表中的每個項目都有它自己的詳細列表按鈕。我想要做的是，當一個用戶點擊其中一個按鈕時，它的詳細信息將作爲可摺疊界面的對話框中的列表加載。當用戶點擊列表中的其中一個項目時，它會顯示更多細節。列表內的某種列表內的某種列表。

運行這個jsfiddle鏈接應該讓你知道我正在嘗試做什麼。 http://jsfiddle.net/pSRxu/7/

下面是代碼：

<!-- HTML Code --> 
<div data-role="page" id="page"> 
    <a href="#page_0" data-role="button" data-rel="page" class="clicker" id="tester_1">Tester 1</a> 
    <a href="#page_0" data-role="button" data-rel="page" class="clicker" id="tester_2">Tester 2</a> 
</div> 
<div data-role="page" id="page_0"></div> 

/* jQuery Code */ 
$(document).ready(function() { 

    $(".clicker").on("click", function() { 
     var page_id = $(this).attr("id").split("_")[1]; 
     var items = '<div data-theme="d" data-role="header" class="ui-corner-top ui-overlay-shadow ui-header ui-bar-d" role="banner"><h1 class="ui-title" tabindex="0" role="heading" aria-level="1">Dialog</h1></div><div data-collapsed-icon="arrow-r" class="ui-collapsible ui-collapsible-inset ui-corner-all" data-enhanced="true" data-role="collapsible"><h2 class="ui-collapsible-heading"><a class="ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-icon-minus" href="#"><div id="preRendered_' + page_id + '">' + page_id + '</div><span class="ui-collapsible-heading-status"> click to collapse contents</span></a></h2><div aria-hidden="false" class="ui-collapsible-content"><ul id="collapsibleContent' + page_id + '">Tester ' + page_id + '</ul></div></div></div>'; 
     $("#page_0").empty(); 
     $("#page_0").append(items); 
    }); 
});

這裏會發生什麼，如果你點擊按鈕的頁面加載帶有可摺疊接口完整的一個，但如果你去退了出來，然後再次單擊（或另一個按鈕）界面不再完好無損。

我很漂亮，這與DOM已經加載的事實有關，但我不確定可以做些什麼。

感謝

來源

2014-05-02 Robert

你只需要添加觸發器（「創建」）的頁面，迫使JQM重新增強內容

$("#page_0").append(items).trigger("create");

更新FIDDLE

你真的在使用jQM 1.2，還是隻是爲了小提琴？

來源

2014-05-02 16:40:19 ezanker

謝謝Ezanker！這就是訣竅，不能相信這很簡單。 – Robert

jQuery Mobile頁面在第一次點擊後失去它的可摺疊性

回答

相關問題