Question

我有一个从主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

我不确定为什么这个功能存在并且正常工作

Answer 1

关于jQuery移动文档：

由于mobileinit事件是立即触发的，因此您需要在加载jQuery Mobile之前绑定事件处理程序。按以下顺序链接到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();
});

调用函数时，pageinit事件不起作用

1 个答案: