How do I get jQuery Mobile to re-execute on generated code? - jquery-mobile

Question

I'm trying to generate some jQuery Mobile elements with Javascript. After the javascript runs and places the generated elements in the myTest div, the styling and scripting are not attached as they are on the static content. Is there any way to have jQuery execute on the generated code?
Here's an example:
Markup:
<!-- 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>
Script:
$(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);
}
Link to jsfiddle: http://jsfiddle.net/DcFhj/

Answer 1

First off your markup is actually slightly off, the collapsible-set widget is meant to contain within it several collapsible widgets.
For example (taken from the 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>
Have a look at the following question from the jQuery Mobile documentation. Basically in general in order to enhance markup that is dynamically inserted you have to either initialize the widget on the markup or you can trigger the create event on a parent element and jQuery Mobile should initialize all of the appropriate widgets.
In this case being that you just have one widget you just need to initialize the collasible widget (also interesting enough this works with your current markup)
$("#myTest").append(parent).find('div').collapsible();
http://jsfiddle.net/DcFhj/3/
If for example you had several widgets that needed enhancement (or just for simplicity) you could instead trigger the create method (this doesn't work with your current markup but if you correct it it should).
$("#myTest").append(parent).trigger('create');
http://jsfiddle.net/DcFhj/4/