我正在尝试显示控件组中的复选框列表，这些复选框具有可单击的图像。但是，点击事件不会在移动设备上触发，但在浏览器上运行良好。
根据建议，我尝试使用bind/live/on 绑定(bind)事件，并尝试使用“touchstart”事件。 为了使样式正确，我设置了 a 标签，其中包含“data-role=”none”。
<div data-role="content" data-theme="a">
<fieldset id="lstProcedures" runat="server" data-role="controlgroup">
<input type='checkbox' name='chk1' id='chk1' value='1' />
<label for='chk1'> TEST
<a href='#' data-role="none" style="float: right" id="test" onclick="alert('Hello'); event.stopPropagation(); return false;">
<img src='/Images/pdf_icon32.png' alt='pdf' />
</a>
</label>
</fieldset>
</div>
最好将我的整个页面添加到此，因为我不确定我哪里出错了:
<head runat="server">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/Content/lightgreen3.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
$(document).bind("mobileinit", function () {
$.mobile.pageLoadErrorMessageTheme = "a";
$.mobile.pageLoadErrorMessage = "Error!!!";
});
</script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript">
function ButtonClicked(senderName) {
var id = GetWorksheetID();
switch (senderName) {
case "Back":
window.location = "../MDetails.aspx?ID=" + id;
break;
}
}
function GetWorksheetID() {
var $tmp = $("#hdnField");
return $tmp.val();
}
$(document).on("pageinit", "#procedures", function () {
$("#lstProcedures > label > a").on("vclick", function () {
alert("Hello");
return false;
});
});
$(document).ready(function () {
parent.popup.SetHeaderText("Select Procedures");
});
function DisplayPDF(id) {
// alert("Hello " + id);
// window.open("http://google.com", "_blank");
}
</script>
<body>
<form id="form1" runat="server">
<input type="hidden" id="hdnField" runat="server" />
<div data-role="page" id="procedures">
<div data-role="header" data-theme="a" data-position="fixed">
<div class="ui-grid-a">
<div class="ui-block-a">
<a href="#" id="btnBack" runat="server" data-role="button" onclick="ButtonClicked('Back')"
data-icon="arrow-l" data-iconpos="top">Back </a>
</div>
<div class="ui-block-b">
<asp:Button ID="btnSave" runat="server" data-icon="check" data-iconpos="top" Text="Save" />
</div>
</div>
</div>
<div data-role="content" data-theme="a">
<fieldset id="lstProcedures" runat="server" data-role="controlgroup">
<legend></legend>
<input type='checkbox' name='chk1' id='chk1' value='1' />
<label for='chk1'>
TEST <a href='#' style="float: right" data-role="none" id="test" onclick="alert('Hello')">
<img src='/Images/pdf_icon32.png' alt='pdf' />
</a>
</label>
</fieldset>
</div>
</div>
</form>
最佳答案
您正在使用 onclick 属性来注册您的处理程序，这是不鼓励的，并且仅支持来自定点设备的实际点击事件。移动设备使用不同的基于“触摸”的事件。
jQuery Mobile 定义了一个由单击和触摸事件触发的虚拟事件 ( vclick )。您可以删除 onclick 属性并以推荐的、不引人注目的方式处理该事件:
$(document).on("pageinit", "#yourPageId", function() {
$("#lstProcedures > label > a").on("vclick", function() {
alert("Hello");
return false;
});
});
请注意，从处理程序返回 false 已经相当于对事件调用 stopPropagation() 和 preventDefault()，因此您在我们的例子中，不必显式执行对 stopPropagation() 的调用。
关于javascript - JQuery Mobile 单击控制组内不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17806442/