PhoneGap/jQueryMobile滑块小部件问题：在屏幕上出现两次？
我有个奇怪的问题，也许有人能帮我。我正在使用PhoneGap 2.5/jQueryMobile 1.3.2/jQuery 1.9.1为iOS应用程序编写应用程序。在应用程序中，每当我使用滑块小部件时，它们都会在屏幕上出现两次。我尝试在一个单独的html文件中复制它（只包括jQuery/jQuery mobile），效果很好（窗口小部件不会在屏幕上出现两次）。我尝试刷新小部件（不做任何事情），甚至使用前面提到的延迟特性加载文件。不管怎样，问题仍然在出现。有什么帮助吗？下面是相关的代码（我包括了标题以防万一）PhoneGap/jQueryMobile滑块小部件问题：在屏幕上出现两次？,jquery,ios,jquery-mobile,cordova,Jquery,Ios,Jquery Mobile,Cordova,我有个奇怪的问题，也许有人能帮我。我正在使用PhoneGap 2.5/jQueryMobile 1.3.2/jQuery 1.9.1为iOS应用程序编写应用程序。在应用程序中，每当我使用滑块小部件时，它们都会在屏幕上出现两次。我尝试在一个单独的html文件中复制它（只包括jQuery/jQuery mobile），效果很好（窗口小部件不会在屏幕上出现两次）。我尝试刷新小部件（不做任何事情），甚至使用前面提到的延迟特性加载文件。不管怎样，问题仍然在出现。有什么帮助吗？下面是相关的代码（我包括了标题
评价那部电影！
var dd=$.Deferred（）；
var jqd=$.Deferred（）；
$.when（dd，jqd）.done（doInit）；
$（文档）.bind（'mobileinit'，函数（）{
jqd.resolve（）；
});
文件。添加的监听器（'DeviceRady'，DeviceRady，false）；
函数devicerady（）{
dd.解决（）；
}
函数doInit（）{
警报（“准备就绪”）；
}
...
演示分级页面
-->
<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>