Question

Using jQuery Mobile, I want an alert to display when the user opens a page

<div data-role="page" id="page3">
    <div data-role="header">
        <h1>Page Three</h1>
    </div>
    <div data-role="content">   
        <script>alert('How are you');</script>  
    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>

But the above code shows the alert on the startup of the app and when I open the page it does nothing. Thanks in advance for your help.

Answer 1

With jQueryMobile there are specific events to know when the page loads.

You should instead try the following (put this in your head element, before the body):

<script>
$('#page3').live('pageshow', function() {
   alert('Page ' + $(this).attr('id') + ' about to be shown');
});
</script>

You could also handle instead the ‘pagebeforeshow’/’pagecreate’ events.