JQuery Mobile點擊裏面的控制組不工作

我想顯示一個控制組內的複選框，有一個可點擊的圖像列表。但是，點擊事件不會在手機上觸發，但可以很好地工作在瀏覽器上。JQuery Mobile點擊裏面的控制組不工作

從建議中，我嘗試使用bind/live/on綁定事件，並嘗試使用'touchstart'事件。爲了讓我獲得正確的樣式，我設置了a-tag，'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>

來源

2013-07-23 Rune Borgen

你使用的是什麼版本？ jq和jqm – Omar

您使用的是onclick屬性註冊您的處理程序，這是不鼓勵，只支持實際點擊前夕nts來指點設備。移動設備使用不同的「基於觸摸」的事件。

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-23 09:36:19

感謝您的快速回復。我嘗試了各種建議的組合，並查看了文檔。由於某種原因，它仍然無法正常工作。不知道爲什麼不。 :( –

@Rune，如果你用你的page元素的id替換了'yourPageId'，並且你的jQuery最近已經足以支持'on（）'，這應該可以工作（除非我錯過了某些東西）。任何東西？ –

我已經添加了所有的代碼，因爲我不知道發生了什麼。正如您將會看到的，我正在使用另一個標籤上的onclick事件，並且它在我的所有頁面中都可以正常工作。 –

JQuery Mobile點擊裏面的控制組不工作

回答

相關問題