JQuery Mobile Dynamic Div Pages

Question

I'm new to JQuery + JQuery mobile.

I am attempting to create dynamic div elements for styling purposes. I am pulling in JSON from an AJAX call, tossing it into an unordered list, and wrapping it into a div. The AJAX + JSON works beautifully, but when I go to create the DIV within the script and attach it into another div container, it doesn't work. I've done a lot of reading on this, but none of the solutions I've found seems to work for the div part.

I've simplified my code down to the following:

HTML:

  <div data-role="page">
        <div data-role="header">
            <h1>Page Title</h1>
        </div><!-- /header -->

        <div id="someDiv" data-role="content"></div>
        <div id="anotherDiv"></div>
    </div>

JavaScript:

$(document).ready(function() {
    var newDiv = '<div id="d1"><p>This will attach to the content</p></div>';
    var aDiv = '<div id="test" data-role="page"><p>This never gets displayed because of data-role?</p></div>';
    $("#someDiv").html(newDiv).trigger('create');
    $("#anotherDiv").html(aDiv).trigger('create');
});​

Note how aDiv doesn't attach to anotherDiv . I suspect this has something to do with the data-role="page" attribute in aDiv .

JSFiddle Link

I've been stuck on this for 1+ day. Any help is greatly appreciated!!

Answer 1

In fact your aDiv is being attached, just not displayed (you can examine your markup in Firebug/WebInspector/DragonFly and see this) since only one JQM page at a time is displayed.

If you want to attach a new page you can try adding it to your body

Here's a fork of your fiddle

http://jsfiddle.net/49LgB/