JQuery Mobile ChangePage OnClick

by Okulo

HTML

<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css">
<div data-role="page" id="p1">
    <div data-role="header">
         <h1>Header</h1>

    </div>
    <div data-role="content"> <a href="#" id="add" data-role="button">Click Me</a>

    </div>
    <div data-role="footer">
         <h4>Footer</h4>

    </div>
</div>
<div data-role="page" id="p2">
    <div data-role="header">
         <h1>Header 2</h1>

    </div>
    <div data-role="content">Page Two</div>
    <div data-role="footer">
         <h4>Footer</h4>

    </div>
</div>

JavaScript

$('#p1').live('pagecreate', function (e) {
    $("#add").click(function (e) {
        $.mobile.changePage('#p2', {
            transition: "flip"
        });
    });
});