我在 JQuery mobile 的帮助下开发了一个 phonegap 应用程序，它有四个部分，每个部分都有自己的 html 文件。问题是，例如，如果我首先加载 main.html，然后通过链接导航到 list.html，则 list.html 中的列表视图不会显示任何内容，但如果我将 list.html 作为第一页加载，它就可以工作完美，我在设备上测试时发现了这个问题。希望有人可以帮我解决这个问题
以这个文件为例
--------clasificados.html--------------
<!DOCTYPE HTML>
<head>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css"/>
<link href="css/custom.css" rel="stylesheet" type="text/css"/>
<script src="cordova-2.6.0.js"></script>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
</head>
<html>
<body>
<div data-role="page" id="clasificados">
<div data-role="header" data-position="fixed" data-id="header1" data-tap-toggle="false">
<h1>Clasificados</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview">
<li data-icon="arrow-r"><a href="vehiculos.html" data-transition="slide">Vehiculos</a></li>
<li data-icon="arrow-r"><a href="bienesraices.html" data-transition="slide">Bienes Raices</a></li>
<li data-icon="arrow-r"><a href="empleos.html" data-transition="slide">Empleos</a></li>
<li data-icon="arrow-r"><a href="diversos.html" data-transition="slide">Diversos</a></li>
</ul>
</div>
<div data-role="footer" class="nav-glyphish-example" data-position="fixed" data-id="footer1" data-tap-toggle="false">
<div data-role="navbar" class="nav-glyphish-example">
<ul>
<li><a href="main.html" id="periodico_icon" data-icon="custom"><br/>Periodico</a></li>
<li><a href="directorio.html" id="directorio_icon" data-icon="custom"><br/>Directorio</a></li>
<li><a href="" id="clasificados_icon" data-icon="custom" class="ui-btn-active ui-state-persist"><br/>Clasificados</a></li>
<li><a href="cuponera.html" id="cuponera_icon" data-icon="custom"><br/>Cuponera</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
--------vehiculos.html-------------
<div data-role="page" id="vehiculos" data-add-back-btn="true">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>Vehiculos</h1>
</div>
<div data-role="content">
<ul id='vehiculosOutput' data-role="listview">
</ul>
</div>
<div data-role="footer" class="nav-glyphish-example" data-position="fixed" data-id="footer1" data-tap-toggle="false">
<div data-role="navbar" class="nav-glyphish-example">
<ul>
<li><a href="main.html" id="periodico_icon" data-icon="custom"><br/>Periodico</a></li>
<li><a href="directorio.html" id="directorio_icon" data-icon="custom"><br/>Directorio</a></li>
<li><a href="" id="clasificados_icon" data-icon="custom" class="ui-btn-active ui-state-persist"><br/>Clasificados</a></li>
<li><a href="cuponera.html" id="cuponera_icon" data-icon="custom"><br/>Cuponera</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
--------vehiculos.js----
$(document).ready(function(){
$.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
// retry not set or less than 2 : retry not requested
if( !originalOptions.retryMax || !originalOptions.retryMax >=200 ) return;
// no timeout was setup
if( !originalOptions.timeout >0 ) return;
if( originalOptions.retryCount ) {
// increment retry count each time
originalOptions.retryCount++;
}else{
// init the retry count if not set
originalOptions.retryCount = 1;
// copy original error callback on first time
originalOptions._error = originalOptions.error;
};
// overwrite error handler for current request
options.error = function( _jqXHR, _textStatus, _errorThrown ){
// retry max was exhausted or it is not a timeout error
if( originalOptions.retryCount >= originalOptions.retryMax || _textStatus!='timeout' ){
// call original error handler if any
if( originalOptions._error ) originalOptions._error( _jqXHR, _textStatus, _errorThrown );
return;
};
// Call AJAX again with original options
$.ajax( originalOptions);
};
});
var output = $('#vehiculosOutput')
$.ajax({
url: 'http://www.periodicosonofertas.com/mobile/conexVehiculos.php',
dataType: 'jsonp',
jsonp: 'jsoncallback',
success:
function(data, status){
$.each(data, function(i,item){
var vehicles = '<li>'+item.name + '<p></p>'
+ '<p><font style="white-space:normal; font-size: small" >'+item.descripcion+'</p>' + '<p>'+item.contacto+'</p>' + '<p>'+item.telefono+'</p>' + '<p>'+item.correo+'</p></li>';
output.append(vehicles);
});
output.listview('refresh');
},error: function( jqXHR, textStatus, errorThrown ){
// display error status on failure
alert( 'error: ' + textStatus );
}
,timeout:5000
,retryMax: 200
});
});