1

メインの html ページから呼び出される html ページがあり、これは正常に動作します。リモート サーバーの php スクリプトを呼び出してリスト ビュー アイテムを作成する関数を起動したいと考えています。電話ギャップ、jquery mobile 1.2.0、およびjquery 1.8.3を使用しています

呼び出された html ページには、次のコードがあります。

<!DOCTYPE HTML>
<html>
<head>

<title>Search by area</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="jquery.mobile.structure-1.2.0.min.css" />
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.2.0.min.js"> </script>
<link rel="stylesheet" href="custom.css" />

<script type="text/javascript">

function getAreas() {
   $.ajax({
       type:'GET',
       url:'http://localhost/getData.php',
       dataType:'jsonp',
       jsonp: 'jsoncallback',
       timeout: 5000,
       success: function(data, status){ 
              $.each(data, function(i,item){
        $('#list').append("<li><a href='#' data-transition='slidedown'>" + item.area_name + "<span class='ui-li-count'>" + item.deal_count + "</span></a></li>");
        $("#list").listview("refresh");


                });

       },
       error: function(data){
           // error on loading data
           alert('error');

       }
    });
};
</script>

</head>
<body> 

    <div id="areas" data-role="page" data-add-back-btn="true">
    <script type="text/javascript">
            $("#areas").on('pageinit', function() {
                // get the areas from the database 
                getAreas();

            });
    </script>
        <div data-role="header">

            <h1> Bucuresti deals</h1>

        </div>

        <div data-role="content">

        <div class="choice_list">

        <h1> In which town do you want to eat? </h1>
</div>
        </div>
   </div>

</body>
</html>

以下に示すように、実際のバインドを特定の ID を持つ div の間に配置する必要があることを読みました。

<div id="areas" data-role="page" data-add-back-btn="true">
<script type="text/javascript">
        $("#areas").on('pageinit', function() {
            // get the areas from the database 
            getAreas();

        });

火事のバグでは、次のメッセージが表示されます

ReferenceError: getAreas が定義されていません

なぜこれが関数が存在して機能するのかわかりません

4

1 に答える 1

2

jQueryモバイルドキュメント：

mobileinitイベントはすぐにトリガーされるため、jQueryMobileが読み込まれる前にイベントハンドラーをバインドする必要があります。次の順序でJavaScriptファイルにリンクします。

<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

したがって、あなたの場合、これは次のようになります。

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="script.js"> </script>
<script type="text/javascript" src="jquery.mobile-1.2.0.min.js"> </script>

script.js現在ページにある外部化スクリプトになります。

function getAreas() {
  $.ajax({
   type:'GET',
   url:'http://localhost/getData.php',
   dataType:'jsonp',
   jsonp: 'jsoncallback',
   timeout: 5000,
   success: function(data, status){ 
          $.each(data, function(i,item){
    $('#list').append("<li><a href='#' data-transition='slidedown'>" + item.area_name + "<span class='ui-li-count'>" + item.deal_count + "</span></a></li>");
    $("#list").listview("refresh");


            });

   },
   error: function(data){
       // error on loading data
       alert('error');

   }
 });
};

と

$("#areas").on('pageinit', function() {
        // get the areas from the database 
        getAreas();

    });

これらの方法も使用できます。

$(document).bind("mobileinit", function(){
   getAreas();
});

$(document).live( 'pageinit',function(event){
  getAreas();
});
于 2012-12-23T19:07:21.820 に答える