2

我正在尝试在控制组中显示具有可点击图像的复选框列表。但是，click 事件不会在移动设备上触发，但在浏览器上可以正常工作。

根据建议，我尝试使用 bind/live/on 绑定事件，并尝试使用“touchstart”事件。为了让我得到正确的样式，我设置了一个标签，带有'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>

4

1 回答 1

3

您正在使用onclick属性来注册您的处理程序，这是不鼓励的，并且仅支持来自指针设备的实际点击事件。移动设备使用不同的、基于“触摸”的事件。

jQuery Mobile 定义了一个由点击和触摸事件触发的虚拟化事件 ( vclick )。您可以删除您的onclick属性并以推荐的、不显眼的方式处理该事件：

$(document).on("pageinit", "#yourPageId", function() {
    $("#lstProcedures > label > a").on("vclick", function() {
        alert("Hello");
        return false;
    });
});

请注意，false从处理程序返回已经等同于调用事件stopPropagation()和preventDefault()事件，因此在我们的例子中您不必显式执行调用stopPropagation()。

于 2013-07-23T09:36:19.443 回答