Question

我使用html css和js在eclipse上构建我的phonegap项目，并且我在我的js文件中使用了我的jquery和jquery移动库来使用 mobile.changepage 功能但是它一直在给予我白色屏幕然后返回到同一页面（没有发生变化）

这是我的档案：

＆＃13;

document.addEventListener('touchmove', function(e) {
	e.preventDefault();
}, false);


document.getElementById("Golds").addEventListener('touchstart', function(){
	alert("omar");
	$.mobile.changePage('login.html');
});


document.getElementById("Titans").addEventListener('touchstart', function(){
	$.mobile.changePage("login.html");
});
//End Login Form//

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title>Phone Gap trial</title>
<link rel= 'stylesheet' href='css/bootstrap.css' />
<link rel= 'stylesheet' href='css/font-awesome.min.css' />
 <link rel= 'stylesheet' href='css/style.css' />
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
</head>

<body>
	<div class="ourteam text-center">
	<!--start container-->
	<div  class="team">
	<section class="header">
		<div>
		<h1>Train & Game</h1>
		</div>
		</section>
		<div class="container">
		
			<div class="row">

			<div class="col-xs-4">
			<div class="person">
			<img id="Golds" class="teamphotos img-circle" src="img\golds-gym-logo.png"/>
			<h6>Gold's Gym</h6>
			</div>
			</div>
			
			<div class="col-xs-4">
			<div class="person">
			<img id="Titans" class="teamphotos img-circle" src="img\Titans.jpg"/>
			<h6>Titans Gym</h6>
			</div>
			</div>
			
			<div class="col-xs-4">
			<div class="person">
			<img id="Smart" class="teamphotos img-circle" src="img\smart.png"/>
			<h6>Smart Gym</h6>
			</div>
			</div>

			</div>
			<br>
			<div class="row">
			
			<div class="col-xs-6">
			<div class="person">
			<img id="SamiaAllouba" class="teamphotos img-circle" src="img\Samia-Allouba.jpg"/>
			<h6>Samia Allouba</h6>
			</div>
			</div>
			
			<div class="col-xs-6">
			<div class="person">
			<img class="teamphotos img-circle" src="img\fibers.jpg"/>
			<h6>Fibers Gym</h6>
			</div>
			</div>
			
			</div>

			</div>
			<!--end container-->
	</div> 
	<!--end team-->
	</div>
<!--Our team div end-->


<script src="js/index.js"></script>
<script src="js/jquery-2.1.4.min.js"> </script>
<script src="js/jquery.mobile-1.4.5.min.js"> </script>
<script src="js/bootstrap.min.js"> </script>
</body>
</html>

＆＃13;

Answer 1

<!DOCTYPE html>
<html>
<head>
<title>Phone Gap trial</title>
<link rel= 'stylesheet' href='css/bootstrap.css' />
<link rel= 'stylesheet' href='css/font-awesome.min.css' />
 <link rel= 'stylesheet' href='css/style.css' />
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
</head>

<body>
    <div class="ourteam text-center">
    <!--start container-->
    <div  class="team">
    <section class="header">
        <div>
        <h1>Train & Game</h1>
        </div>
        </section>
        <div class="container">

            <div class="row">

            <div class="col-xs-4">
            <div class="person">
            <img id="Golds" class="teamphotos img-circle" src="img\golds-gym-logo.png"/>
            <h6>Gold's Gym</h6>
            </div>
            </div>

            <div class="col-xs-4">
            <div class="person">
            <img id="Titans" class="teamphotos img-circle" src="img\Titans.jpg"/>
            <h6>Titans Gym</h6>
            </div>
            </div>

            <div class="col-xs-4">
            <div class="person">
            <img id="Smart" class="teamphotos img-circle" src="img\smart.png"/>
            <h6>Smart Gym</h6>
            </div>
            </div>

            </div>
            <br>
            <div class="row">

            <div class="col-xs-6">
            <div class="person">
            <img id="SamiaAllouba" class="teamphotos img-circle" src="img\Samia-Allouba.jpg"/>
            <h6>Samia Allouba</h6>
            </div>
            </div>

            <div class="col-xs-6">
            <div class="person">
            <img class="teamphotos img-circle" src="img\fibers.jpg"/>
            <h6>Fibers Gym</h6>
            </div>
            </div>

            </div>

            </div>
            <!--end container-->
    </div> 
    <!--end team-->
    </div>
<!--Our team div end-->


<!--<script src="js/index.js"></script>--> <!-- Commented this Line in your code -->
<script src="js/jquery-2.1.4.min.js"> </script>
<script src="js/jquery.mobile-1.4.5.min.js"> </script>
<script src="js/bootstrap.min.js"> </script>
<script src="js/index.js"></script> <!-- Added this line -->
</body>
</html>

Javascript也可以

$(document).on('touchmove', function(e) {
    e.preventDefault();
}, false);


$("#Golds").on('touchstart', function(){
    alert("omar");
    $.mobile.changePage('login.html');
});


$("#Titans").on('touchstart', function(){
    $.mobile.changePage("login.html");
});

jQuery中的Mobile.changepage无法正常工作（白屏）

1 个答案: