从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文件调用函数

回答

相关问题