移动.jQuery中的changepage不工作(白屏)

Mobile.changepage in jQuery not working(white screen)

本文关键字：白屏 工作 jQuery 中的 changepage 移动      更新时间：2023-09-26

我使用html css和js在eclipse上构建我的phonegap项目，我包括了我的jquery和jquery移动库来使用移动。changepage函数在我的js文件，但它一直给我白屏幕，然后返回到同一页面(没有变化发生)

这是我的文件:

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//
<!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>

<!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");
});
相关文章：