Question

我目前正在使用jquery mobile和ASP.NET MVC 4为iPad构建移动网站。我有一个动态创建的列表视图，显示搜索结果。我希望用户能够单击列表视图中的项目，并使该特定列表项中的文本显示在同样位于视图中的文本框中。

我可以在桌面计算机上使用Safari，但它无法在iPad上运行。

为了简单起见并尝试缩小问题范围，我在视图中对一个简单的小列表视图进行了硬编码。结果是一样的。可以在Safari中的桌面上使用，但不能在iPad上使用。

这是非常简化的VIEW代码，适用于桌面上的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>

我想知道这是否与我们使用布局页面有关。我们的布局页面略有不同，具体取决于网站是否在移动设备上呈现。

移动布局视图：

<!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>

桌面布局视图：

<!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 - 这是我实际需要它运行的地方。

谢谢！

Answer 1

您是否尝试在testJs li上使用bind？我绑定一个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引用是正确的，并在firefox中使用firebug来调试任何散乱错误。

iPad上的Listview点击活动

1 个答案: