Dynamically adding a page in jQuery Mobile not working

Question

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?

Can you add sample code to jsbin.com? It should work fine, maybe problem is somewhere else? — jpkeisala
– jpkeisala, Commented Aug 10, 2011 at 7:00
With 1.0b3 you can try this: $('body').append('<div id="'+ generatedId +'" data-role="page"><div data-role="header"><h2>Page</h2></div><div data-role="content">content</div></div>').trigger('create'); — Smamatti
– Smamatti, Commented Sep 29, 2011 at 13:28

r0m4n · Accepted Answer · 2011-08-11 22:08:30Z

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>

Collectives™ on Stack Overflow

Dynamically adding a page in jQuery Mobile not working

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related