Jquery mobile: pageinit event not fired

Question

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>

possible duplicate http://stackoverflow.com/questions/7729729/jquery-mobile-binding-to-pageinit-event — RestingRobot, Feb 06 '13 at 22:33

score 2 · Accepted Answer · answered Feb 07 '13 at 07:47

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());
    });

Thanks a lot Peterm. It worked. I don't know what I was doing before! I should stop writing code so late at night! Bye, Janko. — Janko, Feb 11 '13 at 22:25
I definitely would, but here it's saying "Vote Up requires 15 reputation" .. sorry I am new! I will as soon as I got them. — Janko, Feb 16 '13 at 10:50

score 0 · Answer 2 · answered Jun 18 '14 at 20:43

0

After some big search I found that the pageinit event doesn't fired due Ajax. Then in the link where you call next page add data-ajax="false" Second Page

answered Jun 18 '14 at 20:43

user2044276

1
4

Jquery mobile: pageinit event not fired

2 Answers2

Linked