Question

<!DOCTYPE html>
<head>
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">


</head>
<body>
    <div data-role="page" id="twitterPage" data-theme="a">

        <div data-role="content">
            <ul id="tweet-list" data-role="listview" data-inset="true" data-filter="true" >

            </ul>
        </div>
    </div>

    <script type="text/javascript">
        $.ajax({
            url: "http://192.168.1.60/json_android/getItemData.php",
            jsonpCallback: 'item',
            contentType: "application/json",
            dataType: 'jsonp',
            success: function(data) {
                console.log(data);

                var markup = "";
                $.each(data.list, function(i, elem) {
                    var $template = $('<li>    <div class=ui-grid-a>   <div class=ui-block-a>  </div>  <div class=ui-block-b>    </div>  </div>   </li>');

                    $template.find(".ui-block-a").append('<a href=#  id=' + elem['itemId'] + '>' + elem['itemId'] + '</a>');
                    $template.find(".ui-block-b").append("<input type=text />")


                    markup += $template.html();

                });
                $("#tweet-list").append(markup).listview("refresh", true);

                // Transition to the Twitter results page.
                //$.mobile.changePage($("#twitterPage"));
            },
            error: function(request, error) {
                alert(error);

            }
        });



        $('#tweet-list').on('click', 'a', function(event) {
            event.preventDefault();
            console.log($(this).closest('div').next('.ui-block-b').find('input').val());
        });

   </script>
</body>

我尝试使用上面的代码用数据填充列表视图。它的工作得益于stackoverflow，但是当我在Android平板电脑上试用它时它无法运行。它只显示列表视图的搜索栏。

Answer 1

尝试在$（document）.on（'pageshow'，function（）{}）中添加你的脚本;

 <!DOCTYPE html>
 <head>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
 </head>
<body>
<div data-role="page" id="twitterPage" data-theme="a">
  <script type="text/javascript">
  $(document).on('pageshow',function(){
    $.ajax({
        url: "http://192.168.1.60/json_android/getItemData.php",
        jsonpCallback: 'item',
        contentType: "application/json",
        dataType: 'jsonp',
        success: function(data) {
            console.log(data);

            var markup = "";
            $.each(data.list, function(i, elem) {
                var $template = $('<li>    <div class=ui-grid-a>   <div class=ui-block-a>  </div>  <div class=ui-block-b>    </div>  </div>   </li>');

                $template.find(".ui-block-a").append('<a href=#  id=' + elem['itemId'] + '>' + elem['itemId'] + '</a>');
                $template.find(".ui-block-b").append("<input type=text />")


                markup += $template.html();

            });
            $("#tweet-list").append(markup).listview("refresh", true);

            // Transition to the Twitter results page.
            //$.mobile.changePage($("#twitterPage"));
        },
        error: function(request, error) {
            alert(error);

        }
    });



    $('#tweet-list').on('click', 'a', function(event) {
        event.preventDefault();
        console.log($(this).closest('div').next('.ui-block-b').find('input').val());
    });
});
  </script>
    <div data-role="content">
        <ul id="tweet-list" data-role="listview" data-inset="true" data-filter="true" >

        </ul>
    </div>
</div>


</body>

无法在Android选项卡上显示HTML列表视图

1 个答案: