按钮点击后页面仍然重新加载

Question

按钮点击后页面仍然重新加载

4

我有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';
}

登录页面不能切换到仪表盘页面，而是重新加载。按钮点击没有被捕获。我想让页面滑动。

编辑后:

更新的js代码：

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

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

在loginPage.html中创建了第二个js文件并将其添加到body中。

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没有被调用。

- Pallavi Prasad

no in the end of body - Pallavi Prasad

在您的登录页面中，我看不到 init() 被调用的地方。 - HeadCode

它被称为登录页面主体的onload中调用。 - Pallavi Prasad

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Varun · Accepted Answer

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

希望这可以帮助你。