loading div with jquery mobile

I have a problem when loading in content with

$('#next').click(function(){
        $('#boundary').load('options.html #pagecontent').page();


    });

The problem is the #pagecontent div residing in options.html loads in but not in intended jquery mobile elements.

the in options.html with id=page content renders fine if you preview that page. its only when i load try and load it into another page div wit开发者_C百科h id="boundary" that all the jquery mobile rendering fails, and the elements instead just load in as native html elements.

in the options.html: a standard div holding some ui elements.

<div id="pagecontent">
     // Jquery mobile button 
      <a href="results.php" data-transition="fade" id="result" data-role="button" data-theme="e" rel="external">View results</a>
</div>

Thanks

This is just a guess, but why are you writing code to load a page div from a html file if jQuery Mobile does it by default when user clicks on a link to a page?

I recommend not writing your own AJAX support if it's not for loading data that you need to analyze and alter before adding to the page.

Try adding the .page()

$('#boundary').load('options.html#pagecontent').page();

Maybe attached to the click function

$('#next').click(function(){
    $('#boundary').load('options.html#pagecontent');
}).page();

I had a similar problem and found a solution for forcing the jquery mobile rendering of loaded divs. I know that this answer came very late for you, but maybe it will help others with similar questions:

$('#next').click(function(){
    $('#boundary').load('options.html #pagecontent');
    $('#boundary').trigger("pagecreate").trigger("refresh");
});

This works for me using jquery mobile 1.1.0 (I didn't test with older versions)