Javascript jQueryMobile PhoneGap应用程序上偶尔会出现无响应的后退按钮

我使用jQuery Mobile（1.3.1）和PhoneGap（3.4）创建了一个应用程序，并对其进行了剥皮，使其具有一个相当“平坦”的界面：

我遇到了一些问题，只有在iOS上，而且只是偶尔，只有一个特定屏幕上的“后退”按钮没有响应。其他屏幕上后退按钮的HTML和CSS看起来不错，只是这一个屏幕。在这里，它位于chrome中，在devtools中选择按钮以突出显示其命中区域：

为了更好地衡量，这里还有标题：

此屏幕标题的代码对于应用程序中的几乎每个屏幕都是相同的：

<div data-role="header" data-theme="e" data-position="fixed" data-tap-toggle="false">
    <h1>Event Detail</h1>
    <a data-rel="back">Back</a>
</div>

H1:

-webkit-background-clip: border-box;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(179, 27, 27);
background-image: none;
background-origin: padding-box;
background-size: auto;
border-bottom-color: rgb(179, 27, 27);
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(179, 27, 27);
border-left-style: solid;
border-left-width: 0px;
border-right-color: rgb(179, 27, 27);
border-right-style: solid;
border-right-width: 0px;
border-top-color: rgb(179, 27, 27);
border-top-style: solid;
border-top-width: 1px;
color: rgb(255, 255, 255);
display: block;
font-family: MyriadPro, Helvetica, sans-serif;
font-weight: bold;
height: 45px;
left: 0px;
padding-top: 1px;
position: fixed;
right: 0px;
text-shadow: rgb(85, 85, 85) 0px 1px 0px;
top: -1px;
width: 320px;
z-index: 1000;
zoom: 1;

color: rgb(255, 255, 255);
display: block;
font-family: MyriadPro, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
height: 23px;
margin-bottom: 10px;
margin-left: 48px;
margin-right: 48px;
margin-top: 12px;
min-height: 19.799999237060547px;
outline-color: rgb(255, 255, 255);
outline-style: none;
outline-width: 0px;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
text-align: center;
text-overflow: ellipsis;
text-shadow: rgb(85, 85, 85) 0px 1px 0px;
white-space: nowrap;
width: 224px;
zoom: 1;

-webkit-background-clip: border-box;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
-webkit-box-shadow: none;
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(179, 27, 27);
background-image: none;
background-origin: padding-box;
background-size: auto;
border-bottom-color: rgb(179, 27, 27);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-style: solid;
border-bottom-width: 0px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(179, 27, 27);
border-left-style: solid;
border-left-width: 0px;
border-right-color: rgb(179, 27, 27);
border-right-style: solid;
border-right-width: 0px;
border-top-color: rgb(179, 27, 27);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top-style: solid;
border-top-width: 0px;
box-shadow: none;
color: rgb(255, 255, 255);
cursor: pointer;
display: block;
font-family: MyriadPro, Helvetica, sans-serif;
font-weight: bold;
height: 31px;
left: 5px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: absolute;
text-align: center;
text-decoration: none solid rgb(255, 255, 255);
text-shadow: rgb(0, 0, 0) 0px 1px 0px;
top: 15px;
vertical-align: middle;
width: 60px;
z-index: 10;
zoom: 1;

后退按钮：

-webkit-background-clip: border-box;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(179, 27, 27);
background-image: none;
background-origin: padding-box;
background-size: auto;
border-bottom-color: rgb(179, 27, 27);
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(179, 27, 27);
border-left-style: solid;
border-left-width: 0px;
border-right-color: rgb(179, 27, 27);
border-right-style: solid;
border-right-width: 0px;
border-top-color: rgb(179, 27, 27);
border-top-style: solid;
border-top-width: 1px;
color: rgb(255, 255, 255);
display: block;
font-family: MyriadPro, Helvetica, sans-serif;
font-weight: bold;
height: 45px;
left: 0px;
padding-top: 1px;
position: fixed;
right: 0px;
text-shadow: rgb(85, 85, 85) 0px 1px 0px;
top: -1px;
width: 320px;
z-index: 1000;
zoom: 1;

color: rgb(255, 255, 255);
display: block;
font-family: MyriadPro, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
height: 23px;
margin-bottom: 10px;
margin-left: 48px;
margin-right: 48px;
margin-top: 12px;
min-height: 19.799999237060547px;
outline-color: rgb(255, 255, 255);
outline-style: none;
outline-width: 0px;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
text-align: center;
text-overflow: ellipsis;
text-shadow: rgb(85, 85, 85) 0px 1px 0px;
white-space: nowrap;
width: 224px;
zoom: 1;

-webkit-background-clip: border-box;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
-webkit-box-shadow: none;
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(179, 27, 27);
background-image: none;
background-origin: padding-box;
background-size: auto;
border-bottom-color: rgb(179, 27, 27);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-style: solid;
border-bottom-width: 0px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(179, 27, 27);
border-left-style: solid;
border-left-width: 0px;
border-right-color: rgb(179, 27, 27);
border-right-style: solid;
border-right-width: 0px;
border-top-color: rgb(179, 27, 27);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top-style: solid;
border-top-width: 0px;
box-shadow: none;
color: rgb(255, 255, 255);
cursor: pointer;
display: block;
font-family: MyriadPro, Helvetica, sans-serif;
font-weight: bold;
height: 31px;
left: 5px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: absolute;
text-align: center;
text-decoration: none solid rgb(255, 255, 255);
text-shadow: rgb(0, 0, 0) 0px 1px 0px;
top: 15px;
vertical-align: middle;
width: 60px;
z-index: 10;
zoom: 1;

---

首先让我告诉您，您的问题可能与按钮/标题CSS无关。如果此错误仅在后台运行期间偶尔出现，则问题可能是由于数据rel=“back”功能造成的

与经典的href页面移动不同，data rel=“back”使用javascript导航历史记录，根据应用程序内容的不同，该历史记录可能有效，也可能无效。因为jquerymobile使用AJAX进行页面处理（从您的按钮我可以看到您正在使用这种方法），所以它也有自己处理导航历史的方法

现在，假设您的应用程序大量使用动态内容生成（包括内容删除），例如从DOM中删除上一页，在这种情况下，data rel=“back”将无法工作。如果上一页不存在，您将无法向后移动。还有其他几个因素也会影响此功能

您可以采取哪些措施来解决此问题：

给这个按钮一个类名，甚至是一个id。然后绑定一个点击事件到它（vclick更好，因为它和点击一样快，没有300毫秒的延迟，并且可以在桌面和移动浏览器上工作）并在每次点击这个按钮时添加一个控制台输出。所以你会这样做：

$(document).on('vclick', '#button-ID-goes-here', function(){ 
    console.log('Problematic button');
});

通过这种方式，您可以测试按钮是否已被单击

接下来的事情有点复杂。您从未发布过页面HTML，但查看页面图像，我认为您使用的是正确的jQuery移动模式，基本上您使用的是data role=“page”div容器作为页面容器。如果想要一个合适的jQuery移动应用程序，那么有多少jQuery移动开发人员不知道/不理解他们需要/必须拥有它，你会感到惊讶

请看一个在页眉中包含此按钮的页面。将pagebeforeshow事件绑定到该页面，监视器将触发它，如果它触发，您可以使用它显示上一页和下一页

工作示例：

使用此解决方案检查下一页是否正确，以及是否存在下一页。如果单击“上一步”按钮时未触发此页面事件，则说明发生了不好的情况

使用下面的代码作为解决方法。基本上使用页面事件并记住上一页。因为您当前正在使用后退按钮，所以此解决方案在这里是可行的。我们将使用pagebeforeshow事件来查找上一个页面，我们将它存储到一些JavaScript对象中（它将在页面转换之间保持）

工作示例：

这是数据rel=“back”页面处理的完整自定义解决方案

---

你能给我们看一下应用于标题和h1的CSS吗？还要注意的是，我可以看到CSS对点击的响应，但是导航没有发生。我在update1中也描述了这一点。如果删除这个：data tap toggle=“false”，该怎么办。相同的行为？是的，这并不能修复它，并增加了额外的不希望出现的行为，使标题消失（如果你点击屏幕上的内容）。告诉我一件事，你（我是指你的应用程序）是否在任何时候以编程方式从你的应用程序中删除内容，例如页面。如果前一页以某种方式从DOM中删除，并且导航历史记录没有相应更改，则会发生此错误。在这种情况下，如果您尝试返回（并且您正在使用data rel=“back”）应用程序将被卡住。谢谢您的建议。我肯定在使用

。我会尝试其他方法，然后再给你回复…初步测试看起来不错。它似乎在我的个人设备上工作。在我接受这个之前，需要做一些更广泛的测试，但看起来不错。考虑到目前的情况，我不敢相信这是可行的，但我很高兴它能奏效。（我将很快更新问题的更多细节…）