2

クリック可能な画像を持つコントロールグループ内のチェックボックスのリストを表示しようとしています。ただし、クリック イベントはモバイルでは発生しませんが、ブラウザーでは問題なく動作します。

提案から、bind/live/on を使用してイベントをバインドしようとしましたが、「touchstart」イベントも使用してみました。スタイルを正しくするために、「data-role="none"」を使用して a-tag を設定しました。

<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 に答える