Home/ Questions/Q 9255601
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T11:45:01+00:00

Can somebody out there help me out with this code please? This might be

  • 0

Can somebody out there help me out with this code please? This might be something stupid to fix but I’ve been now stuck with this since hours!
pageinit event doesn’t fire. The only way to get it fired is to move the script inisde the body, just before the closing tag, but this weird structure I haven’t found in any official documentation, and I suspect is wrong !
I am testing on Samsung phone emulator (avd).

<!DOCTYPE html>
<html>
  <head>
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" />


    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script>
       $( document ).delegate("#aboutPage", "pageinit", function () {
                alert('ok');
            alert($('#homePage').text());
        });

</script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <title>Test Mobile Application</title>
  </head>
  <body>
    <div data-role="popup" id="popupBasic">
      <p>-....</p>
    </div>
    <!-- Begin Homepage -->
    <section id="homePage" data-role="page" data-theme="a">
      <header data-role="header" data-position="fixed">
        <h1>Header</h1>
      </header>
      <div class="content" data-role="content">
        <p>Homepage</p>
        <a onclick="javascript:alert($('#homePage').text());" data-role="button">aaaaa</a>
        <p>
          <a href="#aboutPage">Go to About Page</a>
        </p>
        <a href="#popupBasic" data-rel="popup">Open Popup</a>
      </div>
      <footer data-role="footer" data-position="fixed">
        <h1>Footer</h1>
      </footer>
    </section>
    <!-- End Homepage -->
    <!-- Begin About Page -->
    <section id="aboutPage" data-role="page" data-theme="b">
      <header data-role="header" data-position="fixed">
        <h1>Header</h1>
      </header>
      <div class="content" data-role="content">
        <p>This is About Page</p>
        <p>
          <a href="#portfolioPage">Go to Portfolio Page</a>
        </p>
      </div>
      <footer data-role="footer" data-position="fixed">
        <h1>Footer</h1>
      </footer>
    </section>
    <!-- End About page -->
    <!-- Begin Portfolio Page -->
    <section id="portfolioPage" data-role="page" data-theme="a">
      <header data-role="header" data-position="fixed" data-theme="d">
        <h1>Header</h1>
      </header>
      <div class="content" data-role="content" data-theme="c">
        <p>This is Portfolio Page</p>
        <p>
          <a href="#homePage">Go back to Homepage</a>
        </p>
      </div>
      <footer data-role="footer" data-position="fixed" data-theme="d">
        <h1>Footer</h1>
      </footer>
    </section>
    <!-- End Portfolio page -->
  </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your code works just fine. pageinit() is being called exactly once when your About page is being fetched either by clicking on aaaa button or by link Go to About Page.

    Couple of things though:

    First Link jquery.mobile first then use it

    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
    //Your code as of right now
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

    Should be

    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
    //Your code goes here
</script>

    Second Since you’re using jquery 1.8.2 you may consider switch from delegate() to on()

       $(document).on("pageinit", "#aboutPage", function () {
        alert('ok');
        alert($('#homePage').text());
    });
    • 0