JQuery Mobile Нажмите внутри контрольной группы не работает

Я пытаюсь отобразить список флажков внутри группы управления, которые имеют интерактивное изображение. Однако событие click не запускается на мобильном устройстве, но отлично работает в браузере.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, если вы заменили 'yourPageId' на идентификатор вашего элемента страницы, а ваш jQuery достаточно недавний, чтобы поддерживать' on() ', это должно работать (если только я чего-то не хватает). ничего? –

Я добавил весь свой код, так как не уверен, что происходит. Как вы сможете увидеть, я использую onclick-событие для другого тега, и он отлично работает на всех моих страницах. –

JQuery Mobile Нажмите внутри контрольной группы не работает

ответ

Смежные вопросы