Question

当您打开链接时，会触发第1页的pagebeforeshow。当您点击链接转到第2页时，会触发第2页的pagebeforeshow。到目前为止，非常好。

如果您使用左按钮（data-rel="back"）返回，则会触发多余事件。改为使用右键（直接链接到第1页）可以实现我的期望，即只有第1页的pagebeforeshow被触发。

pagebeforeshow也可以替换为pageshow，无关紧要。这里发生了什么？

（在最新的2天Chrome中测试过）

参考资料来源：

<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>

Answer 1

请更改指向重定向到第1页的链接

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

应该是

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

如果您发现此删除正斜杠

有任何问题

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

Answer 2

直播Example

更正了标题和后退按钮属性中的标记

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

jQM在呈现页面时添加了额外的标记，如果使用错误的标记，某些功能可能会发生变化，中断。我认为后退按钮发生了什么，你还添加了一个href =“/”属性，这可能导致jQM尝试导航到它以及返回导致问题的最后一页。

同样在标题中，您使用了<p>标记并将其对齐居中，jQM在使用<h1>时执行此操作

有关后退按钮的更多信息，您可以随时参考docs

Answer 3

原来，这是Chrome控制台中的bug。

Chromium bugtracker

jQuery mobile data-rel =“back”链接导致错误事件被触发

3 个答案: