Open In App

jQuery Mobile Page create Event

Improve
Improve
Like Article
Like
Save
Share
Report

jQuery Mobile is a JavaScript library built on top of jQuery. It is used to create responsive and accessible websites for a variety of devices like smartphones, tablets, and desktops.

In this article, we will be using the jQuery Mobile page create event which triggers after the page has been created. It is the best event if you want to dynamically add content to your page and let jQuery Mobile style it for you.

Syntax:

Initialize the page with the create callback specified.

$(".selector").page({
  create: function( event, ui ) {
      // Your code here.
  }
});

Bind pagecreate event to an event listener.

$( ".selector" ).on( "pagecreate", function( event, ui ) {} );

Parameters: It accepts a callback function that has two parameters.

  • event: It accepts Event type value.
  • ui: It accepts Object type value. The ui object can be empty but used for consistency with other events.

CDN Links:

<link rel=”stylesheet” href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”https://code.jquery.com/jquery-2.1.3.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js”></script>

Example: The below example demonstrates the use of page create event. We bind an event listener to pagecreate event which opens an alert box when the event triggers.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
          "width=device-width, initial-scale=1">
 
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
 
    <script>
        $(document).on("pagecreate", function (event, ui) {
            alert("Pagecreate event triggered.");
        });
    </script>
</head>
 
<body>
 
    <div id="#page1" data-role="page">
        <div data-role="header">
            <h1 style="color:green;">GeeksforGeeks</h1>
            <h3>jQuery Mobile Page create event</h3>
        </div>
        <div role="main" class="ui-content">
            <center>
                <h2>What is GeekforGeeks?</h2>
                <p style="padding: 0px 20px">
                    GeeksforGeeks is a computer science
                    portal for geeks by geeks. Here
                    you can find articles on various
                    computer science topics like Data
                    Structures, Algorithms and many
                    more. GeeksforGeeks also provide
                    courses, you can find the courses at
                    <a href="https://www.geeksforgeeks.org/courses">
                      https://www.geeksforgeeks.org/courses
                    </a>
                </p>
 
                <p class="do-not-toggle-on-tap">
                    For cracking interviews of top
                    product based companies, you need to
                    have good and deep understanding of
                    topics like DSA, System design etc.
                    GeeksforGeeks provide you quality
                    content so that you can prepare for
                    the interviews. GeeksforGeeks also
                    have a practice portal where you
                    can practice problems and brush
                    on your skills. You can visit the
                    practice portal at
                    <a href="https://practice.geeksforgeeks.org">
                      https://practice.geeksforgeeks.org</a>
                </p>
 
            </center>
        </div>
    </div>
</body>
</html>


Output:

jQuery Mobile Page create Event

Reference: https://api.jquerymobile.com/page/#event-create



Last Updated : 30 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads