從html文件中的js文件調用函數

我有一個html文件。在點擊按鈕的文件中，我想調用一個位於js文件中的函數。怎麼做？從html文件中的js文件調用函數

這裏是我的html文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <title>Scrollable HTML table plugin for jQuery</title> 
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> 
<title>jQuery Mobile: Demos and Documentation</title> 


<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" charset="utf-8" src="../cordova-1.6.1.js"></script> 
<script type="text/javascript" src="../jquery.mobile/jquery-1.7.2.min"></script> 
<script type="text/javascript" charset="utf-8" src="../js/main.js"></script> 
<script type="text/javascript" src="../jquery.mobile/jquery.mobile-1.1.0.js"></script> 


</head> 
<body > 

<!-- main login page --> 
<div id="mypage" data-role="page" data-theme="a" data-ajax="false"> 


    <div data-role="header" align="center"> 
     <img border="0" src="../jquery.mobile/images/toplogo.png" /> 

    </div> 


    <div data-role="content"> 

     <form id="loginForm" > 
      <div data-role="fieldcontain" class="ui-field-contain ui-body ui-br" > 
       <label for="username">Username:</label> <input type="text" 
        name="username" id="username" value="" /> <label for="password">Password:</label> 
       <input type="password" name="password" id="password" value="" /> <label 
        for="dob">Date of birth:</label> <input type="password" 
        type="password" name="dob" id="dob" value="" /> 
      </div> 
      <div class="ui-body ui-body-a" > 
       <fieldset class="ui-grid-a" data-theme="a" > 
        <div class="ui-block-a" data-theme="a"> 
         <input type="submit" data-role="button" value="Login" 
          id="submitButton"> 
        </div> 
        <div class="ui-block-b" data-theme="a"> 
         <input type="reset" data-role="button" value="Cancel" 
          id="cancelButton"> 
        </div> 

       </fieldset> 
      </div> 
     </form> 

    </div> 
</div> 


<!-- main menu --> 


<script> 

    console.log("clickkkkkkkkkkkkkkkkkkkk"); 
    $("#loginForm").on("submit",handleLogin); 


</script>

此HTML文件可以通過www/UI文件夾中。現在在www/js文件夾下面有一個名爲main.js的js文件名。其中包含handleLogin函數。

function handleLogin() 
{ 

}

如何從我的html文件中調用此函數。因爲當我點擊登錄按鈕時，相同的頁面被調用。任何幫助將不勝感激。提前致謝。

來源

2012-07-07 PPD

在同一個頁面被稱爲是因爲它的提交表單。你需要取消這個行爲。

function handleLogin(evt) { 
    evt.preventDefault(); 
    //do stuff here... 
}

注意evt參數。這會自動轉發到任何事件回調 - 它是事件對象，其中包含有關觸發事件的數據，並且必須引用該對象才能取消表單的默認操作。

但是如果用戶通過回車鍵提交表單，最好綁定到表單的提交事件而不是直接鍵入按鈕。要做到這一點，將您的jQuery更改爲

$('#loginForm').on('submit', handleLogin);

來源

2012-07-07 10:35:54 Utkanos

嗨Utkanos我已經添加evt在js文件中，如上所示，並且在$（'＃loginForm'）。on（'submit'，handleLogin）上調用;從login.html仍然顯示相同的頁面。謝謝 – PPD 2012-07-07 10:58:16

假設你確定你的'handleLogin'函數正在調用（檢查這個）並且沒有JS錯誤，這不應該發生。如果不確定，請設置JS小提琴向我們展示。 – Utkanos 2012-07-07 11:01:45

這裏是[小提琴]（http://jsfiddle.net/nT3hg/57/） – PPD 2012-07-07 11:14:45

如果main.js是否正確裝入的代碼應該工作，你想要的是event.preventDefault()的submit事件瀏覽器提交表單和不執行handleLogin功能。

如果調用此方法，則不會觸發該事件的默認操作。

$("#loginForm").on("submit",function(e){ 
    e.preventDefault(); 
    handleLogin() 
});

來源

2012-07-07 10:33:51 undefined

@未定義在用您曾經相同的頁面替換舊代碼後調用。如果我在e.preventDefault（）語句之前使用console.log（）進行打印，那麼也不會打印語句。意味着控制不在該塊內。 – PPD 2012-07-07 10:45:53

從html文件中的js文件調用函數

回答

相關問題