JQMobile DIalog events

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css">
<html>
<head><title>jQuery Mobile Test</title></head>
<body>
    <div id="page" data-role="page">
        <div data-role="header">
            <h1>jQuery Mobile</h1>
        </div>
        <div data-role="content">
            <a href="#dialog" data-role="button">Show Dialog</a>           
        </div>
        <div data-role="footer">
            <h1>Footer</h1>
        </div>
    </div>
    <div id="dialog" data-role="dialog">
        <div data-role="header">
            <h1>jQuery Mobile Dialog</h1>
        </div>
        <div data-role="content">
            Place content here
        </div>
        <div data-role="footer">
            <h1>Footer</h1>
        </div>
    </div>
</body>
</html>

JavaScript

$(document).bind('mobileinit', function() {
    //alert('mobileinit');
    $(document).bind('pageinit', function(e, data) {
        // initialize page
        var $page = $(e.target);
        alert('init from ' + $page.attr('id'));
    });
    $(document).bind('pageshow', function(e, data) {
        // show page
        var $page = $(e.target);
        alert('showing ' + $page.attr('id'));
    });
});

// have to manually write script tag since jsFiddle loads external 
// scripts before our code and we need to bind to mobilinit before
// jquery.mobile is loaded
document.write('<scr' + 'ipt type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></sc' + 'ript>');