1

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フォルダーにあります。これで、www/jsフォルダーにあるmain.jsとして以下のjsファイル名があります。これにはhandleLogin関数が含まれています。

function handleLogin()
{

 }

私のhtmlファイルからこの関数を呼び出す方法。ログインボタンをクリックすると同じページが呼び出されるからです。どんな助けでもありがたいです。前もって感謝します。

4

2 に答える 2

1

フォームを送信しているため、同じページが呼び出されます。この動作をキャンセルする必要があります。

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

evt引数に注意してください。これは、すべてのイベントコールバックに自動的に転送されます。これは、発生したイベントに関するデータを含むイベントオブジェクトであり、フォームのデフォルトのアクションをキャンセルするために参照する必要があります。

ただし、ユーザーがEnterキーを使用してフォームを送信する場合は、ボタンに直接バインドするのではなく、フォームの送信イベントにバインドすることをお勧めします。これを行うには、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 に答える