1

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

我可以让它在我的台式机上的 Safari 中工作，但它不能在 iPad 上工作。

为了简单起见并试图缩小问题范围，我在我的视图中硬编码了一个简单的小列表视图。结果是一样的。适用于 Safari 的桌面，但不适用于 iPad。

这是在桌面版 Safari 中工作的非常简化的 VIEW 代码（请注意，_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 上运行——这是我真正需要它发挥作用的地方。

谢谢！

4

1 回答 1

1

您是否尝试在您的 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 引用是正确的，并在 firefox 中使用 firebug 来调试任何散乱的错误。

于 2013-08-02T14:34:26.307 回答