Floris
Floris

Reputation: 21

Dynamically adding a page in jQuery Mobile not working

When I create a whole new page in jQuery Mobile the page gets created, but when I click the link with the id linking to the just created page, it does not work. The list item link stays selected (blue, in the standard theme), but the page itself does not load.

The page gets created by appending it to the body:

$('body').append('<div id="' generatedId '" data-role="page"><div data-role="header"><h2>Page</h2></div><div data-role="content">content</div></div>');

When I turn off jQuery Mobile you can clearly see that the page gets created, but with jQM on it cannot be accessed.

What am I doing wrong?

Upvotes: 0

Views: 1320

Answers (1)

r0m4n
r0m4n

Reputation: 3512

The following worked for me...

<!DOCTYPE html>
<html>
 <head>
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<!-- standard Jquery/jQuery Mobile Libraries -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />   
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>   
<script type="text/javascript">
$(document).ready(function(){
    for(i=0;i<3;i++){
        $('body').append('<div id="test'+i+'" data-role="page"><div data-role="header"><h2>Page'+i+'</h2></div><div data-role="content">content'+i+'</div></div>');
    }
});
</script>
</head> 

<body>  
<div data-role="page" id="mainmenu">
    <div data-role="header"><h1>Sample Home</h1></div>
    <div class="ui-body ui-body-c">
        <div data-role="content">   
            <a href="#test0" class="preShowHTML">Sample 1</a>     
            <a href="#test1" class="preShowHTML">Sample 2</a>     
            <a href="#test2" class="preShowHTML">Sample 3</a>                               
        </div>      
    </div>          
</div>

Upvotes: 2

Related Questions