Событие Listview tap на iPad

В настоящее время я создаю мобильный сайт для iPad, используя jquery mobile и ASP.NET MVC 4. У меня есть динамически созданный список, который отображает результаты поиска. Я хочу, чтобы пользователь мог щелкнуть элемент в списке, и текст из этого конкретного элемента списка появится в текстовом поле, которое также находится в представлении.Событие Listview tap на iPad

Я могу заставить это работать в Safari на моем настольном компьютере, но он не будет работать на iPad.

Для простоты и попытки сузить проблему, я жестко закодировал простой небольшой список в моем представлении. Результаты были одинаковыми. Работает на рабочем столе в Safari, но не на iPad.

Вот очень упрощенный вид кода, который работает в Safari на рабочий стол (Пожалуйста, обратите внимание, что _Header отдельный, частичный вид):

@section Header 
{ 
     <script type="text/javascript"> 

     $('#testJs li').on('click', (function() {  
      var results = $.trim($(this).text());   
      $('#testText').val(results);   
      })); 

     </script> 

     @{ Html.RenderPartial("_Header"); } 
} 

@section Content 
{ 
    <input type="text" id="testText"> 
    <ul id="testJs" data-role="listview" data-inset="true" data-theme="c">   
     <li id="task400" class="tasks">Test task 400</li> 
     <li id="task295" class="tasks">Test task 295</li>   
    </ul> 
}

Пожалуйста, обратите внимание, что я попытался изменить «щелчок» на ' нажмите «(см. ниже) без успеха. Он по-прежнему не работает на iPad.

<script type="text/javascript"> 

    $('#testJs li').on('tap', (function() { 
     var results = $.trim($(this).text());   
     $('#testText').val(results);  
    })); 

</script>

Я также попытался с помощью следующих с теми же результатами. Все еще не работает на iPad.

<script type="text/javascript"> 

    $('#testJs').delegate('li', 'tap', function() { 
     var results = $.trim($(this).text());   
     $('#testText').val(results); 
    }); 

</script>

Я действительно задаюсь вопросом, связано ли это с нашим использованием страниц макета. У нас несколько разные страницы макета, в зависимости от того, отображается ли сайт на мобильном устройстве или нет.

Mobile Layout View:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8" /> 
     <title>@ViewBag.Title</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1" /> 
     @Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile") 
     @Scripts.Render("~/bundles/modernizr") 
     @Styles.Render("~/Content/mobileCss", "~/Content/css") 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $.mobile.ajaxEnabled = false; 
      }); 
     </script> 
    </head> 
<body> 
    <div data-role="page" data-theme="b"> 
     <div data-role="header" data-position="fixed" data-tap-toggle="false"> 
      @if (IsSectionDefined("Header")) { 
       @RenderSection("Header", false) } 
      else { <h1>@ViewBag.Title</h1> } 
     </div> 
     <div data-role="content"> 
      @RenderSection("Content")  
     </div> 
    </div> 
</body> 
</html>

Desktop Layout View:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>@ViewBag.Title</title> 
     <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
     @Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile") 
     @Scripts.Render("~/bundles/modernizr") 
     @Styles.Render("~/Content/mobilecss", "~/Content/css") 
    </head> 
    <body> 
     <div data-role="page" data-theme="b"> 
      <div data-role="header" data-position="fixed" data-tap-toggle="false"> 
       @if (IsSectionDefined("Header")) { 
        @RenderSection("Header") } 
       else { <h1>@ViewBag.Title</h1> } 
      </div> 
      <div data-role="content"> 
       @RenderSection("Content") 
      </div> 
     </div> 
    </body> 
</html>

Я застрял на этом в течение нескольких дней, так что любая помощь будет оценена. Все, что я стараюсь, работает на моем рабочем столе, но не на iPad, и именно там я действительно нуждаюсь в нем.

Спасибо!

источник

2013-08-02 user2163572

Пробовал ли вы использовать bind на вашем testJs li? Я свяжите tapHandler, как показано ниже:

<script> 
$(function(){ 
    $("#testJs li").bind("tap", tHandler); 

    function tHandler(event){ 
     var results = $.trim($(this).text());   
     $("#testText").val(results); 
    } 
}); 
</script>

или на как это должно работать:

$('#testJs').on('tap', 'li', function (event) { 
  var results = $.trim($(this).text());   
    $("#testText").val(results); 
    console.log('this should work') 
}

Также используются двойные кавычки на верхнем примере, но это не должно иметь значение не знаю я думать. Если это не так, убедитесь, что ссылки .js верны, и используйте firebug в firefox для отладки для любых ошибок отладки.

источник

2013-08-02 14:34:26 ApolloSoftware

Ваше первое предложение сработало! Большое вам спасибо! Вы только что спасли мою рабочую неделю. В случае, если кто-то еще сталкивается с этим, я попробовал второе предложение (участие в нем) несколько дней назад, хотя сам это устранил, и это тоже не работало на iPad. Я также попытался переключиться между двойными кавычками и одинарными кавычками без успеха. В любом случае, ваше первое предложение .bind работало как шарм. Мне нужно научиться jquery и MVC впервые в сжатые сроки в этом рабочем проекте, поэтому я постоянно учился на чтении stackoverflow. Еще раз спасибо! – user2163572

Рад помочь брату! Мой последний проект был .NET EF/MVC4, и это было ужасно. Я вернусь к родному iOS/Objective-C в моем текущем проекте, но это определенно не последнее, что я видел в jQuery и .NET. iOS/Cocoa широко использует MVC.Model View Controller, возможно, является одной из лучших парадигм вокруг, независимо от платформы. Это помогает продвигать модульность и сотрудничество, особенно когда вам нужно расшифровать свои данные и бизнес-логику из представления. Вы будете нести свое знание об этом с платформы на платформу. Удачи с вашим проектом! – ApolloSoftware

Событие Listview tap на iPad

ответ

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