無法在安卓選項卡上顯示HTML列表視圖

<!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平板電腦上嘗試它時，它不起作用。它只顯示列表視圖的搜索欄。無法在安卓選項卡上顯示HTML列表視圖

來源

2013-10-29 user2889058

嘗試在$（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>

來源

2013-10-29 12:00:11 Ben10

無法在安卓選項卡上顯示HTML列表視圖

回答

相關問題