jQuery .appendTo() on a <ul> not working
<p>A friend helped me with this code.  It works perfect in HTML without jQTouch or JQM.  When put in JQM the details section is not showing up on the next page.  What am I doing wrong? </p>

<p>This is my jQuery mobile outlay. Very simple just trying to get the details page (Pagethree) to show up.  Currently it reverts back to the first page but the url is listed properly.</p>

<pre><code>$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "COMBINED.xml",
        dataType: "xml",
        success: function(xml) {
            $(xml).find('MEMBERS').each(function(){
                 /* 
                 * set up list page
                 * gather all variables and format into single variable
                 * for ease of editing
                 */
                var thisID = 'DETAILSPAGE'+$(this).find('ID').text();
                var FIRSTNAME = $(this).find('FIRSTNAME').text()
                var LASTNAME = $(this).find('LASTNAME').text()
                var PARTY = $(this).find('PARTY').text()
                var DISTRICT = $(this).find('DISTRICT').text()
                var TITLE = $(this).find('TITLE').text()
                var THISMEMBER = FIRSTNAME +' '
                        + LASTNAME +'&lt;br /&gt;'
                        + TITLE +'-District '+ DISTRICT +', '
                        + PARTY;
                $('&lt;li&gt;&lt;/li&gt;').html('&lt;a href="#'+thisID+'"&gt;'+THISMEMBER+'&lt;/a&gt;').appendTo('#LIST');
                /* set up details page */
                var EMAIL = $(this).find('EMAIL').text();
                var OCCUPATION = $(this).find('OCCUPATION').text();
                var EDUCATION = $(this).find('EDUCATION').text();
                var THISMEMBERDETAIL = '&lt;strong&gt;'+FIRSTNAME+' '+LASTNAME+'&lt;/strong&gt;&lt;br /&gt;'
                        + EMAIL+'&lt;br /&gt;'
                        + OCCUPATION+'&lt;br /&gt;'
                        + EDUCATION;
                $('&lt;a class="memberInfo" name="'+thisID+'"&gt;&lt;/a&gt;').html(THISMEMBERDETAIL).appendTo('#DETAILS');
            });
        }
    });
    /* toggle function */
    $('a').live('click', function(){
        /* get rid of the pound sign */
        var href = $(this).attr('href');
        var details = href.substring(1);
        /* if any previous member info was showing, hide it */
        $('.memberInfo').hide();
        /* show the current member info */
        $('a[name="'+details+'"]').show();
    });
});
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>.memberInfo {
    /* start with all member info hidden */
    display: none;
}
</code></pre>

<p><strong>HTML</strong></p>

<pre><code>&lt;div data-role="page" id="page" data-theme="b" &gt;
    &lt;div data-role="header"&gt;
        &lt;h1&gt;Page One&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div data-role="content"&gt;     
        &lt;ul data-role="listview"&gt;
            &lt;li&gt;&lt;a href="#LISTPAGE"&gt;Page Two&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#page3"&gt;Page Three&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#page4"&gt;Page Four&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;             
    &lt;/div&gt;
    &lt;div data-role="footer"&gt;
        &lt;h4&gt;Page Footer&lt;/h4&gt;
    &lt;/div&gt;
&lt;/div&gt;    
&lt;div data-role="page" id="LISTPAGE"&gt;
    &lt;div data-role="header"&gt;
        &lt;h1&gt;Page Two&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div data-role="content"&gt;
        &lt;ul data-role="listview" id="LIST"&gt;&lt;/ul&gt;
    &lt;/div&gt;
    &lt;div data-role="footer"&gt;
        &lt;h4&gt;Page Footer&lt;/h4&gt;
   &lt;/div&gt;
&lt;/div&gt;
&lt;div data-role="page" id="DETAILSPAGE"&gt;
    &lt;div data-role="header"&gt;
        &lt;h1&gt;Page Three&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div data-role="content" &gt;
        &lt;ul data-role="listview" id="DETAILS"&gt;&lt;/ul&gt;
    &lt;/div&gt;
    &lt;div data-role="footer"&gt;
        &lt;h4&gt;Page Footer&lt;/h4&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>
