【发布时间】：2011-10-20 12:36:08
【问题描述】：
当您打开链接时，第 1 页 的pagebeforeshow 被触发。当您单击链接转到 page 2 时，会触发 page 2 的 pagebeforeshow。到目前为止，一切顺利。
如果您随后使用左键 (data-rel="back") 返回，则会触发多余的事件。改用右键（直接链接到 page 1）可以达到我的预期，即只有 page 1 的 pagebeforeshow 被触发。
pagebeforeshow也可以换成pageshow，没关系。这里发生了什么？
（在最新的 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>
【问题讨论】：
-
在 Firefox 7 中运行良好。
-
在 Safari 5.1.1 上也能正常工作。我在运行 Chrome 时遇到了错误...
-
下面的帖子已经回答了这个问题：stackoverflow.com/questions/9321655/…
标签： javascript jquery mobile jquery-mobile jquery-events