1

我有一个 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 文件夹中。现在下面的 js 文件名为 main.js，它位于 www/js 文件夹中。其中包含handleLogin 函数。

function handleLogin()
{

 }

如何从我的 html 文件中调用此函数。因为当我单击登录按钮时，会调用同一页面。任何帮助将不胜感激。提前致谢。

4

2 回答 2

1

调用同一页面是因为它正在提交表单。您需要取消此行为。

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

注意evt论点。这会自动转发到任何事件回调 - 它是事件对象，其中包含有关触发事件的数据，并且必须引用它才能取消表单的默认操作。

但是，如果用户通过回车键提交表单，最好绑定到表单的提交事件而不是直接绑定到按钮。为此，请将您的 jQuery 更改为

$('#loginForm').on('submit', handleLogin);
于 2012-07-07T10:35:54.870 回答
0

如果正确加载，代码应该可以工作main.js，你想要的event.preventDefault()就像submit事件浏览器提交表单并且handleLogin函数没有执行一样。

如果调用该方法，则不会触发事件的默认动作。

$("#loginForm").on("submit",function(e){
   e.preventDefault();
   handleLogin()
});
于 2012-07-07T10:33:51.337 回答