Question

我有一个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文件中调用此函数。因为当我点击登录按钮时，同一页面被调用。任何帮助将不胜感激。提前谢谢。

Answer 1

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

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

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

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

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

Answer 2

如果main.js被正确加载，您想要的是event.preventDefault()，而submit事件浏览器提交表单并且handleLogin函数不是$("#loginForm").on("submit",function(e){ e.preventDefault(); handleLogin() });执行。

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

{{1}}

从html文件中的js文件调用函数

2 个答案: