Errors with jQuery Mobile using a Single, Dynamic .html page which links to n JQM "pages"_问答_开发者

I have a mobile site, which consists of a single HTML page开发者_StackOverflow (Mobile.html). The content is loaded dynamically into JQM formatted divs of data-role="page". The only static content on the page is the body tag; everything else is built up and torn down as the user interacts with the page, which is building the DOM from web service calls.

This all works very well, with one major exception. Link handling is broken. Once JQM has appended to the url hash, refresh and navigation breaks. I have been testing various solutions to this problem, and none so far really work.

Using both JQM nightly build and 1.0A4.1, I've simplified the problem into this test code:

<body id='CswMobile'>
<div id="StaticPage1" data-role="page" >
    <div id="StaticHeader1" data-role="header"><h1>Static Header 1</h1></div>
    <div id="StaticContent1" data-role="content">
        <ul data-role="listview" data-theme="b">
            <li><a href="#StaticPage1">Static Page 1</a></li>
            <li><a href="#StaticPage2">Static Page 2</a></li>
            <li><a href="#DynamicPageA">Dynamic Page A</a></li>
            <li><a href="#DynamicPageB">Dynamic Page B</a></li>
        </ul>
    </div>
</div>
<div id="StaticPage2" data-role="page">
    <div id="StaticHeader2" data-role="header"><h1>Static Header 2</h1></div>
    <div id="StaticContent2" data-role="content">
        <ul data-role="listview" data-theme="b">
            <li><a href="#StaticPage1">Static Page 1</a></li>
            <li><a href="#StaticPage2">Static Page 2</a></li>
            <li><a href="#DynamicPageA">Dynamic Page A</a></li>
            <li><a href="#DynamicPageB">Dynamic Page B</a></li>
        </ul>
    </div>
</div>

<script type="text/javascript">

    $('#StaticPage1').live('tap', function (event) { return onClick(event); });

    function onClick(event)
    {
        var id = $(event.target.outerHTML).attr('href');
        var $page = $(id);
        if ($page.length === 0) $page = makePage(id);
        $page.live('tap', function (event) { return onClick(event); });
        $.mobile.changePage($page, 'slide');
        return false;
    }

    function makePage(id)
    {
        id = id.replace('#', '');
        $('body').append('<div id="' + id + '" ' + 'data-role="page">')
        var $page = $('#' + id);
        $page.append('<div id="Header_' + id + '" ' + 'data-role="header"><h1>Header of ' + id + '</h1>');
        var $header = $('#Header_' + id);
        $page.append('<div id="Content_' + id + '" ' + 'data-role="content">');
        var $content = $('#Content_' + id);
        $page.append('<div id="Footer_' + id + '" ' + 'data-role="footer">');

        var $li1 = $('<li><a href="#StaticPage1">Static Page 1</a></li>');
        var $li2 = $('<li><a href="#StaticPage2">Static Page 2</a></li>');
        var $li3 = $('<li><a href="#DynamicPageA">Dynamic Page A</a></li>');
        var $li4 = $('<li><a href="#DynamicPageB">Dynamic Page B</a></li>');
        var $ul = $('<ul data-role="listview" data-theme="b"></ul>').append($li1).append($li2).append($li3).append($li4);
        $content.append($ul);
        return $page;
    }
</script>

The static content works just as you would expect, but the dynamic content produces unexpected behavior, typically either a 404 error (GET http://localhost/DynamicPageA 404 (Not Found)), or a JQM "Loading..." animation on an invalid URL in the browser address bar (http://localhostDynamicPageA).

First, I cannot get link handling to work at all without calling $.mobile.changePage();. By this time, the new content is already in the DOM--so why can't JQM handle the link?

Second, changePage() seems to inject its own quirks. Clicking the same dynamic list item twice returns a 404 error. Refreshing the browser on a dynamic link returns 404.

What is the simplest way to solve this problem using JQM's infrastructure?

Edit:

Adding a data-url attribute to the "page" divs solves part of the issue--link handling now works on click for dynamic content; however, back (using JQM's auto-generated 'Back' button) and refresh are still broken.

The 'Back' button generates this URL: http://localhostdynamicpagea/# with this error: "Fiddler: DNS Lookup for localhostdynamicpagea failed. No such host is known". The browser's Back works just fine--so I may just roll my own 'Back' button to solve this.
Browser Refresh on a Dynamic page still generates an empty screen with this console log error: "GET http://localhost/DynamicPageB 0 ()". I would expect a page refresh on this url: http://localhost/Mobile.html#DynamicPageB to refresh Mobile.html less the dynamic hash.

While I was eventually able to get my sample code to work as expected, I again ran into problems when trying to implement in my mobile app--as I am generating all of my content based on the results of AJAX calls. This presents a race-condition with JQM, which is asynchronously parsing the DOM: I nearly always redirect to the new "page" before .page() has been called.

Fortunately, I found this: http://www.a2zdotnet.com/m/#view.htm?id=196

Implementing per site suggestions now.