jQuery mobile data-rel="back" link causing wrong events to be fired

javascript jquery mobile jquery-mobile jquery-events

24,822

Solution 1

Turns out, this is a bug in Chrome's console.

Solution 2

Corrected tags in header and back button attributes

<a data-rel="back">Back</a>

jQM adds extra markup when rendering the page, if you use the wrong tags some of the functionality might change, break. I think what was happening for the back button is you also added a href="/" attribute and this might have caused jQM to try to navigate to it as well as going back to the last page causing the issue.

Also in the header you had used the <p> tag and aligned it center, jQM does this when using the <h1>

For more on the back button you can always refer to the docs

Solution 3

Please change the link to redirect to page 1

<a href="data-rel-back.html" data-icon="back">Go directly to page 1</a>

should be

<a href="/#test1" data-icon="back">Go directly to page 1</a>

if you find any trouble with this remove forward slash

 <a href="#test1" data-icon="back">Go directly to page 1</a>

24,822

Author by

nisc

Updated on July 19, 2020

Comments

nisc almost 4 years

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>