jQuery Mobile page loses it's collapsiblity after first click

Question

I've tried over the past few days to understand this strange behaviour that jQuery Mobile seems to be doing.

I have a list of items, each item in the list has button that has it's own list of details. What I want to do is when a user clicks on one of the buttons it's details load up as a list in a dialog with collapsible interface. When the user clicks on one of the items in the list it shows more details. Kind of a list within a list within a list sort of thing.

Running this jsfiddle link should give you an idea of what I'm trying to do. http://jsfiddle.net/pSRxu/7/

Here is the code:

  <!-- 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);
     });
 });

What happens here is if you click on one of the buttons a page loads with the collapsible interface intact, but if you go back out and click again (or the other button) the interface is no longer intact.

I'm pretty this has to do with the fact that the DOM has already been loaded, but I'm not sure what can be done about that.

Thanks

Answer 1

You just need to add trigger("create") to the page to force jQM to re-enhance the content

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

Updated FIDDLE

Are you actually using jQM 1.2, or was that just for the fiddle?