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 事件会立即触发，所以您需要在加载 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();
});
于 2012-12-23T19:07:21.820 回答