0 
<!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 タブレットで試してみると動作しません。リスト ビューの検索バーのみを表示します。

4

1 に答える 1