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

Question

当您打开链接时，将pagebeforeshow 第1页的 pagebeforeshow 。 当您单击链接转到第2页时 ，将pagebeforeshow 第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

实例

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

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

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

同样在标题中你使用了<p>标签并将其对齐为中心，jQM在使用<h1>时执行此操作

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

Answer 3

事实证明，这是Chrome控制台中的一个错误。

Chromium bugtracker

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

问题描述

3 个解决方案

解决方案1
1 2011-10-20 13:03:13

解决方案2
1 2011-10-20 13:30:07

解决方案3
0 已采纳 2011-10-20 16:27:42

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

问题描述

3 个解决方案

解决方案1 1 2011-10-20 13:03:13

解决方案2 1 2011-10-20 13:30:07

解决方案3 0 已采纳 2011-10-20 16:27:42

解决方案1
1 2011-10-20 13:03:13

解决方案2
1 2011-10-20 13:30:07

解决方案3
0 已采纳 2011-10-20 16:27:42