我有一个奇怪的问题,也许有人可以帮助我。我正在使用PhoneGap 2.5 / jQueryMobile 1.3.2 / jQuery 1.9.1为iOS应用程序编写应用程序。在应用程序中,每当我使用滑块小部件时,它们在屏幕上出现两次。我尝试在一个单独的html文件(包括jQuery / jQuery mobile)中再现它,它工作得很好(小部件在屏幕上不出现两次)。我尝试刷新小部件(没有做任何事情),甚至使用提到的here延迟功能加载文件。无论如何,问题仍然存在。有帮助吗?这是相关的相关代码(我包括标题只是包含)
<html>
<head>
<title>Rate That Movie!</title>
<link rel="stylesheet" href="_/css/mystyles.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=default-width, height=default-height, target-densitydpi=device-dpi" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
var dd = $.Deferred();
var jqd = $.Deferred();
$.when(dd, jqd).done(doInit);
$(document).bind('mobileinit', function () {
jqd.resolve();
});
</script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="cordova-2.5.0.js"></script>
<script type="text/javascript" src="js/movieRetrieval.js"></script>
<script type="text/javascript">
document.addEventListener('deviceready', deviceReady, false);
function deviceReady() {
dd.resolve();
}
function doInit() {
alert('Ready');
}
</script>
</head>
<body>
<div id="actor0" data-theme="a" data-role="page5" data-title="View Source: results">
<div data-role="header"
data-theme="a"
data-position="fixed"
data-id="vs_header">
<h1>...</h1>
<a href="#home"
id ="screen_one"
data-icon="home"
data-iconpos="notext"
data-transition="slide"
data-direction="reverse"
>Home</a>
<a href="#genre-director"
id="to_genre_director"
data-icon="right-arrow"
data-iconpos="notext"
data-transition="slide"
data-direction="forward"
>next</a>
</div> <!--end of header-->
<h1>demo rating page</h1>
<br/>
<div data-role="contain">
<div data-role="fieldcontain">
<p id="label0"></p>
<input type="range"
id="slider-mini1" value="0" min="-10" max="10"
data-highlight="true" />
</div>
<div data-role="fieldcontain">
<p id="label1"></p>
<input type="range" name="slider-mini"
id="slider-mini2" value="0" min="-10" max="10"
data-highlight="true" />
</div>
<div data-role="fieldcontain">
<p id="label2"></p>
<input type="range" name="slider-mini"
id="slider-mini3" value="0" min="-10" max="10"
data-highlight="true" />
</div>
<div data-role="fieldcontain">
<p id="label3"></p>
<input type="range" name="slider-mini"
id="slider-mini4" value="0" min="-10" max="10"
data-highlight="true" />
</div> -->
</div><!-- end of container -->
</div> <!--end of actor page -->
</body>
</html>