如果listitem位于JQM + phonegap中的页脚后面，则不会触发页脚按钮Android
问题描述：
我已使用4个按钮固定页脚。当任何listitem在这个页脚下（footer后面），并点击页脚按钮。如果listitem位于JQM + phonegap中的页脚后面，则不会触发页脚按钮Android
期望 - 必须触发页脚按钮单击事件。 实际 - 页脚后面的ListItem正在触发。
更新 -
index.html页面
<div data-role="header" data-position="fixed" data-theme="f">
<a href='#'><img class="back"/></a>
<div class="logo"><img class="logoimg"/></div>
<a href='#' class="ui-btn-right"><img class="btn_toplogout"/></a>
</div><!-- /header -->
<div data-role="content">
<div class="ui-caption"><span id="txt_airtime_topup"></span></div>
<form name="topup" autocomplete="off">
<h4><span id="txt_operator"></span>:</h4>
<div class="ui-droplist" id="topup_operatordroplist">
<select id="t_operator" name="t_operator" data-theme="drop" data-icon="circle_d">
</select>
</div>
<h4><span id="txt_recptmsisdn"></span>:</h4>
<div class="ui-droplist" id="topup_persondroplist">
<select id="topup_person" name="topup_person" data-theme="drop" data-icon="circle_d" onChange="topup_update_contacts();">
</select>
</div>
<div class="input-contain">
<input type="tel" id="t_number" maxlength="14" name="t_number" placeholder="IDNO: (leave empty for yourself)" autocomplete="off"/>
</div>
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<h4><span id="txt_amount2"></span>:</h4>
<div class="input-contain amount-margin">
<input type="number" id="ppamount" name="ppamount" maxlength="8" class="ui-amount" min="0" autocomplete="off"/>
</div>
</div>
<div class="ui-block-b">
<h4><span id="txt_currency"></span>:</h4>
<div class="ui-droplist">
<select id="p_currency" data-theme="drop" data-icon="circle_d">
<option value="EUR">EUR</option>
</select>
</div>
</div>
</fieldset>
</form>
<a href="#" id="btn_topup" class="ui-button" data-role="button" data-theme="red"></a>
</div><!-- /content -->
<div data-role="footer" data-id="btmmenu" data-position="fixed" data-theme="f" class="postlogin">
<div data-role="navbar"><ul>
**<li><a href="#home">Home</a></li> //this is footer
<li><a href="#transfer">Send Money</a></li>
<li><a href="#paybill">Pay Bills</a></li>
<li><a href="#manage">Manage Accounts</a></li>**
</ul></div>
</div><!-- /footer -->
下拉列表下页脚未来 -
<h4>Currency:</h4>
<div class="ui-droplist">
<select id="request_currency" data-theme="drop" data-icon="circle_d">
<option value="EUR">EUR</option>
</select>
</div>
CSS -
.ui-droplist .ui-btn-active {
border: 1px solid #808080;
background: #fdfdfd;
font-weight: bold;
color: #111111;
text-shadow: 0 1px 1px #ffffff;
background-image: url(images/arrow_down.png),
-webkit-gradient(linear, left top, left bottom, from(#eee), to(#fdfdfd)); /* Saf4+, Chrome */
background-image: url(../../exclusive/images/arrow_down.png),
-webkit-linear-gradient(#eee , #fdfdfd); /* Chrome 10+, Saf5.1+ */
background-image: url(../../exclusive/images/arrow_down.png),
-moz-linear-gradient(#eee , #fdfdfd); /* FF3.6 */
background-image: url(../../exclusive/images/arrow_down.png),
-ms-linear-gradient(#eee , #fdfdfd); /* IE10 */
background-image: url(../../exclusive/images/arrow_down.png),
-o-linear-gradient(#eee , #fdfdfd); /* Opera 11.10+ */
background-image: url(../../exclusive/images/arrow_down.png),
linear-gradient(#eee , #fdfdfd);
background-position: right center !important;
background-repeat: no-repeat !important;
}
页脚CSS -
.postlogin.ui-footer .ui-navbar li.ui-block-a a .ui-btn-inner {
background-image: url(images/icon-home.png);
background-repeat: no-repeat;
background-position: 50% 0;
}
答
而做以下我没有得到你提到的问题：
例index.html
：
<html>
<head>
<meta name='viewport' content='minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no'/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile.structure-1.1.1.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<!-- THIS FILE CONTAINS THE CSS YOU POSTED -->
<link rel="stylesheet" href="./css/test.css" />
</head>
<body>
<!-- THIS PAGE CONTAINS THE HTML CODE YOU POSTED + SEVERAL DROP DOWN LIST IN QUESTION -->
<div data-role="page" id="mine">
<div data-role="header" data-position="fixed" data-theme="f">
<a href='#'><img class="back"/></a>
<div class="logo"><img class="logoimg"/></div>
<a href='#' class="ui-btn-right"><img class="btn_toplogout"/></a>
</div><!-- /header -->
<div data-role="content">
<div class="ui-caption"><span id="txt_airtime_topup"></span></div>
<form name="topup" autocomplete="off">
<h4><span id="txt_operator"></span>:</h4>
<div class="ui-droplist" id="topup_operatordroplist">
<select id="t_operator" name="t_operator" data-theme="drop" data-icon="circle_d"></select>
</div>
<h4><span id="txt_recptmsisdn"></span>:</h4>
<div class="ui-droplist" id="topup_persondroplist">
<select id="topup_person" name="topup_person" data-theme="drop" data-icon="circle_d" onChange="topup_update_contacts();"></select>
</div>
<div class="input-contain">
<input type="tel" id="t_number" maxlength="14" name="t_number" placeholder="IDNO: (leave empty for yourself)" autocomplete="off"/>
</div>
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<h4><span id="txt_amount2"></span>:</h4>
<div class="input-contain amount-margin">
<input type="number" id="ppamount" name="ppamount" maxlength="8" class="ui-amount" min="0" autocomplete="off"/>
</div>
</div>
<div class="ui-block-b">
<h4><span id="txt_currency"></span>:</h4>
<div class="ui-droplist">
<select id="p_currency" data-theme="drop" data-icon="circle_d">
<option value="EUR">EUR</option>
</select>
</div>
</div>
</fieldset>
</form>
<a href="#" id="btn_topup" class="ui-button" data-role="button" data-theme="red"></a>
<!-- DROP DOWN LISTS IN QUESTION -->
<h4>Currency:</h4>
<div class="ui-droplist">
<select id="request_currency" data-theme="drop" data-icon="circle_d">
<option value="EUR">EUR</option>
</select>
</div>
<h4>Currency:</h4>
<div class="ui-droplist">
<select id="request_currency" data-theme="drop" data-icon="circle_d">
<option value="EUR">EUR</option>
</select>
</div>
<h4>Currency:</h4>
<div class="ui-droplist">
<select id="request_currency" data-theme="drop" data-icon="circle_d">
<option value="EUR">EUR</option>
</select>
</div>
<h4>Currency:</h4>
<div class="ui-droplist">
<select id="request_currency" data-theme="drop" data-icon="circle_d">
<option value="EUR">EUR</option>
</select>
</div>
<!-- DROP DOWN LISTS IN QUESTION -- END -->
</div><!-- /content -->
<div data-role="footer" data-id="btmmenu" data-position="fixed" data-theme="f" class="postlogin">
<!-- YOUR FOOTER'S BUTTONS -->
<div data-role="navbar"><ul>
<li><a href="#home">Home</a></li>
<li><a href="#transfer">Send Money</a></li>
<li><a href="#paybill">Pay Bills</a></li>
<li><a href="#manage">Manage Accounts</a></li>
</ul></div>
</div><!-- /footer -->
</div>
<!-- THE LINK REFERENCES OF YOUR FOOTER'S BUTTON -->
<div data-role="page" id="home">
<div data-role="content">
1 - HOME
</div>
</div>
<div data-role="page" id="transfer">
<div data-role="content">
2 - TRANSFER
</div>
</div>
<div data-role="page" id="paybill">
<div data-role="content">
3 - PAYBILL
</div>
</div>
<div data-role="page" id="manage">
<div data-role="content">
4 - MANAGE
</div>
</div>
<!-- THE LINK REFERENCES OF YOUR FOOTER'S BUTTON -- END -->
</body>
</html>
你的CSS，包括在test.css：
.ui-droplist .ui-btn-active {
border: 1px solid #808080;
background: #fdfdfd;
font-weight: bold;
color: #111111;
text-shadow: 0 1px 1px #ffffff;
background-image: url(images/arrow_down.png),
-webkit-gradient(linear, left top, left bottom, from(#eee), to(#fdfdfd)); /* Saf4+, Chrome */
background-image: url(../../exclusive/images/arrow_down.png),
-webkit-linear-gradient(#eee , #fdfdfd); /* Chrome 10+, Saf5.1+ */
background-image: url(../../exclusive/images/arrow_down.png),
-moz-linear-gradient(#eee , #fdfdfd); /* FF3.6 */
background-image: url(../../exclusive/images/arrow_down.png),
-ms-linear-gradient(#eee , #fdfdfd); /* IE10 */
background-image: url(../../exclusive/images/arrow_down.png),
-o-linear-gradient(#eee , #fdfdfd); /* Opera 11.10+ */
background-image: url(../../exclusive/images/arrow_down.png),
linear-gradient(#eee , #fdfdfd);
background-position: right center !important;
background-repeat: no-repeat !important;
}
.postlogin.ui-footer .ui-navbar li.ui-block-a a .ui-btn-inner {
background-image: url(images/icon-home.png);
background-repeat: no-repeat;
background-position: 50% 0;
}
当在页脚的按钮点击，而下拉列表页脚背后，按钮/链接通常会触发并重定向至员工页面。
下拉列表不会被触发，我按预期重定向到Manage页：
例如，如果我点击页脚的按钮/链接，如下图所示称为Manage
我不知道，如果你的问题是关系到jQuery Mobile的版本，或设备（Android设备，iPhone，BLAC kberry等？）你正在使用...
为了您的信息，我用jQuery Mobile的版本1.1.1和我上面的测试与iPhone 5
即使我测试你的代码示例使用jQuery Mobile 1.1.1版本，我建议你使用最新版本（目前1.2，检查http://jquerymobile.com/blog/2012/10/02/announcing-jquery-mobile-1-2-0-final/），它修正了旧版本中发现的许多错误。
希望这会为你工作。
你能告诉你代码（HTML，javascript）吗？ – Littm