简体   繁体   中英

Detect changepage on jquery mobile

How can I execute code when I change page with the .changePage() function?

For example I use this code:

$.mobile.changePage( "index.html#pageTwo" );

And when pageTwo is loaded I want to do this:

alert("Test");

In your <head> .. </head> put this:

// Jquery loaded here

<script>
    $(document).on("pageshow","#pageTwo", function() {
        alert("Test");
    }
</script>

// jquery mobile loaded here

Notes:

  1. The code above must be placed AFTER Jquery is loaded and BEFORE jquery mobile is loaded.

  2. The code example above assumes that your index.html page contains a div with at least the attributes of data-role="page" and id="pageTwo":

    <div data-role="page" id="pageTwo"> This is page two content </div>

  3. Jquery mobile only parses/uses anything in the <head>..</head> section of the FIRST PAGE THAT IS LOADED! To ensure that all of the code required for all pages in your mobile site are loaded, regardless of which page the user lands on first, you should structure all your pages like this:

<html>
    <head>
       <script src="path/to/jquery.js"> // load jquery
       <script src="path/to/common.js"> // all jquery mobile page event bindings are placed in here
       <script src="path/to/jquery_mobile.js"> // load jquery mobile
    </head>
    <body>

    <div data-role="page" id="pageOne"> This is page one content </div>

    <div data-role="page" id="pageTwo"> This is page two content </div>

    </body>
    </html>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM