Have a look at the test-case When you open the link, pagebeforeshow for page

Question

0

Asked: May 26, 20262026-05-26T09:25:20+00:00 2026-05-26T09:25:20+00:00

Have a look at the test-case When you open the link, pagebeforeshow for page

0

Have a look at the test-case

When you open the link, pagebeforeshow for page 1 is fired. When you click the link to go to page 2, pagebeforeshow for page 2 is fired. So far, so good.

If you then use the left button (data-rel="back") to go back, excess events are fired. Using the right button instead (direct link to page 1) does what I’d expect, namely, only pagebeforeshow for page 1 gets fired.

pagebeforeshow can also be replaced with pageshow, doesn’t matter. What’s happening here?

(Tested in up-2-date Chrome)

Source for reference:

<html>
  <head>
    <meta charset="utf-8">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>

    <script>
      $('#test1').live('pagebeforeshow', function() {
          console.log("=== pagebeforeshow for #test1");
      });
      $('#test2').live('pagebeforeshow', function() {
          console.log("=== pagebeforeshow for #test2");
      });
    </script>
  </head>

  <body>
    <div data-role="page" id="test1">

      <div data-role="header" align="center">
        <p>Page 1.</p>
      </div><!-- /header -->

      <div data-role="content">
        <p><a href="#test2">Go to page 2.</a></p>
      </div><!-- /content -->

    </div><!-- /page -->

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

      <div data-role="header" align="center">
        <a href="/" data-icon="back" data-rel="back">Back</a>
        <p>Page 2.</p>
        <a href="data-rel-back.html" data-icon="back">Go directly to page 1</a>
      </div><!-- /header -->

      <div data-role="content">
        <p>
        Try the two buttons and have a look at the console.<br>
        Using the left button (data-rel="back") triggers "too many" events.<br>
        The right button does what I'd expect.
        </p>
      </div><!-- /content -->

    </div><!-- /page -->
  </body>
</html>