Question

I have a multipage html (using “div data-role=”page”) that displays 4 pages of a document that can be swiped left or right to move between the pages back and forth.

I have an alert that I want to pop-up only when the page first loads (telling the user they can swipe to move back and forth between pages).

My problem is that it keeps popping up again every time a swipe to a new page is made and I only want it to alert them once when the page loads.

I’ve tried moving the script from the head to inside the element, and I’ve tried binding it to all the different pagecreate, pagebeforecreate, pageinit, etc. events and can’t seem to figure it out.

I appreciate any advice or direction.

Here’s the alert code that is currently showing on every page when swiped:

<script type="text/javascript"> 
 $('div').live("pagecreate",function(event){
alert('Swipe left and right to move between the 5 pages of this lead sheet');
});
</script>

Answer 1

You can bind to the id for the page DIV (ex: div#home).

<script type="text/javascript">
    $('div#home').live("pagecreate", function (event) {
        alert('Swipe left and right to move between the 5 pages of this lead sheet');
    });
</script>

…

<div data-role="page" id="home">