即使点击按钮后页面也会重新加载

我有3个html文件 - start.html，loginPage.html和dashboard.html。当点击登录按钮时，它应该加载仪表板，但我无法访问该按钮。即使点击按钮后页面也会重新加载

的start.html

<html> 
<head> 
    <meta http-equiv="Content-Security-Policy"> 
    <meta name="format-detection" content="telephone=no"> 
    <meta name="msapplication-tap-highlight" content="no"> 
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> 
    <title>Amazon App</title> 
</head> 

<body onload="init()"> 
    <br><br> 

    <div id='content'> 
     <center><img src='img/splashlogo.png'/><center> 
    </div> 

    <script src="cordova.js"></script> 
    <script src="js/jquery.min.js"></script> 
    <script src="js/jquery.mobile.min.js"></script> 
    <script src="require.js"></script> 
    <script src="aws-sdk-2.1.34.min.js"></script> 
    <script src="js/check.js"></script> 
    </body> 
</html>

loginPage.html

<link rel="stylesheet" href="css/index.css"/> 
<SCRIPT TYPE="text/javascript"> 
function setValues(){ 
    $("#accessKey").val('MY-ACCESS-KEY'); 
    $("#secretKey").val('MY-SECRET-KEY'); 
} 
</SCRIPT> 

<div data-role="page" id="start" data-enhance="false" style = 'background: url(../img/BG.png);'> 
<div data-role = "content"> 
    <br><br> 
    <div align="right"> 
     <img src="./img/help-icon.png" onClick= "setValues()"/> 
    </div> 
    <div align = "center"> 
    <img src="./img/Logo login screen.png" height="200" width="170"/> 
    </div> 

    <br><br> 
    <form id="loginForm" align = "center" data-ajax="false"> 
     <div id="user" align = "center"> 
      <input class="amazeFont" type="text" id = "accessKey" Placeholder="Access Key (20 characters)" size="30" maxlength="128" tabindex="1" autocomplete="on" autocorrect="off" autocapitalize="off" data-validation="[NOTEMPTY]"/> 
     </div> 
     <br><br> 
     <div id = "pass" align = "center"> 
      <input class="amazeFont" type="password" id = "secretKey" Placeholder = "Secret Key (40 characters)" size="30" maxlength="1024" autocomplete="on" tabindex="2" data-validation="[NOTEMPTY]"/> 
     </div> 
     <br><br> 
     <center><button type = "submit" id="submitButton" style='width: 80%; height: 40px; background-color: #f15a29; font-weight: bold; color: white; cursor: pointer;'>Login</button></center> 
    </form> 
    </div> 
</div> 

<script src="cordova.js"></script> 
<script src="js/jquery.min.js"></script> 
<script src="js/jquery.mobile.min.js"></script> 
<script src="require.js"></script> 
<script src="aws-sdk-2.1.34.min.js"></script> 
<script src="js/fun.js"></script> 
<script src="js/check.js"></script>

JS：

function init(){ 
    document.addEventListener("deviceReady", onDeviceReady,false); 
} 

function onDeviceReady(){ 
    window.location = 'loginPage.html'; 
    document.getElementById('submitButton').addEventListener("click", startApp,false); 

} 

function startApp(){ 
    alert('switching page'); 
    window.location= 'dashboard.html'; 
}

登录页面不切换到仪表板page.It重载。按钮点击未被捕获。我想让页面滑动。

EDITED：

更新JS：

function init(){ 
    document.addEventListener("deviceReady", onDeviceReady,false); 
} 

function onDeviceReady(){ 
    window.location = 'loginPage.html'; 
}

创建用于loginPage.html第二js和它加入到loginPage.html

function init(){ 
    document.addEventListener('deviceReady', onDeviceReady, false); 
} 

function onDeviceReady(){ 
    document.getElementById('submitButton').addEventListener("click", startApp,false); 
} 

function startApp(){ 
//alert('switching page'); 
    window.location= 'dashboard.html'; 
}

仪表板主体.html不被称为

来源

2015-06-20 Pallavi Prasad

没有在主体的最后 –

在你的loginPage中，我看不到init（）被调用的地方。 – HeadCode

它在loginPage正文的onload中被调用。 –

您正在调用start.html中的init（）方法，该方法负责调用function onDeviceReady()，它具有位置更改，因此会导致其他页面加载。当loginPage.html（也许在不同的函数中）页面加载时，而不是在加载start.html时，您需要添加document.getElementById('submitButton').addEventListener("click", startApp,false);。

希望它有帮助。

来源

2015-06-20 14:52:20 Varun

所以如果我要在不同的js中创建新的函数，它会在登录页面加载时调用吗？ –

是的，关于loginPage.html – Varun

的尝试。仍然没有加载dashboard.html –

即使点击按钮后页面也会重新加载

回答

相关问题