我为我的应用创建了五个索引。第一个索引是欢迎屏幕。第二个索引用于捕获，拍摄pic，可拖动裁剪工具，放大和缩小。我不知道它只适用于某些脚本，但是当我刷新第二个索引时，它可以很好地处理所有功能。
有谁能告诉我这个问题？
我的Html代码在这里： jQuery Moblie测试
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<script type="text/javascript" src="js/TakePhoto.js"></script>
<script type="text/javascript" src="js/drag.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile- 1.0a3.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile- 1.0a3.min.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type='text/javascript' src="js/jquery-ui-1.9.2.custom.js"></script>
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui- 1.9.2.custom.min.css"/>
<script type='text/javascript' src="js/jQuery.ui.touch-punch.js"></script>
</head>
<body>
<div data-role="page" id="takephoto" >
<div data-role="header" class="ui-bar ui-bar-b" data-theme="b">
<h1>Choose a photo for left Person !</h1>
<a href="index.html" data-role="button" data-mini="true" data-theme="b" id="backtochoose">Back</a>
</div>
<div data-role="content">
<h2>Choose a photo for <strong>Left</strong> Person!</h2>
<a href="#" id="capture" data-role="button" data-ajax="false" rel="external" data-theme="b">Take a photo</a>
<a href="#" id="getImg" data-role="button" data-ajax="false" rel="external" data-theme="b">Choose from library</a>
</div>
<div id="image_container" style="display:block;">
<img style="display:none" id="image" width="300" height="350" src="" />
<center><canvas id="mystore1" width="200" height="200" style="background- color:#03F"></canvas></center>
<div class="frame" opacity:0.3><img id="face" width="80" height="80" class="frames" src="img/face.jpg" /></div>
</div>
<div data-role="content">
<a href="#" data-role="button" id="large" data-ajax="false" rel="external" data-inline="true">Larger</a>
<a href="#" data-role="button" id="small" data-ajax="false" rel="external" data-inline="true">Smaller</a>
<a href="#" data-role="button" id="rotate-left" data- inline="true">Left</a>
<a href="#" data-role="button" id="rotate-right" data- inline="true">Right</a>
</div>
<div data-role="content">
<a href="index2.html" data-role="button" data-iconpos="right" data- icon="arrow-r" data-theme="b" >Next</a>
</div>
</div>
</body>
我的脚本在这里：
var pictureSource; // picture source
var destinationType; // sets the format of returned value
// Wait for PhoneGap to connect with the device
document.addEventListener("deviceready",onDeviceReady,false);
// Cordova is ready to be used!
//
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
// Called when a photo is successfully retrieved
function onPhotoDataSuccess(imageData) {
// Uncomment to view the base64 encoded image data
var im=document.getElementById('image');
im.style.display = 'block';
im.src="data:img/jpeg;base64," +imageData;
// console.log(imageData);
}
// Called when a photo is successfully retrieved
function onPhotoURISuccess(imageURI) {
// Uncomment to view the image file URI
// console.log(imageURI);
var largeImage = document.getElementById('largeImage');
// Unhide image elements
//
largeImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
//
largeImage.src = imageURI;
// Get image handle
var image = document.getElementById('image');
var imgCnt = document.getElementById('image_container');
// Unhide image container
imgCnt.style.display = 'block';
// Unhide image elements
image.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
image.src = imageURI;
}
// A button will call this function
function capturePhoto() {
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,destinationType: destinationType.DATA_URL,
correctOrientation: true, targetWidth:200, targetHeigth:200 });
}
// A button will call this function
function getImage(source) {
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source,correctOrientation: true });
}
// Called if something bad happens.
function onFail(message) {
alert('Failed because: ' + message);
}
// Called when capture operation is finished
function captureSuccess(mediaFiles) {
}
// Called if something bad happens.
function captureError(error) {
var msg = 'An error occurred during capture: ' + error.code;
navigator.notification.alert(msg, null, 'Uh oh!');
}
$("#capture").live('click',function(event){
capturePhoto();
});
$("#getImg").live('click',function(event){
getImage(pictureSource.SAVEDPHOTOALBUM);
});
$(document).live(function(e) {
$(".frame").draggable();
});
$("#large").live('click',function(event){
var wsize=$('img.frames').width();
var hsize=$('img.frames').height();
$('img.frames').width(wsize * 1.2);
$('img.frames').height(hsize * 1.2);
});
$("#small").live('click',function(event){
var wsize=$('img.frames').width();
var hsize=$('img.frames').height();
$('img.frames').width(wsize * 0.8);
$('img.frames').height(hsize * 0.8);
});