5

Javascriptを使用してWebフォームを制御しようとしています。これが私のすべてのJavascriptコードであり、私が達成しようとしていることもそれに追加されています。

$(document).ready(function(){
    function loadPage(url){
        $(".body").fadeOut(400, function(){
            $(".body").load(url);
            $(".body").fadeIn(400);
        });
    }
    loadPage("pages/login.html");

    $("#button").on("click", function(){
        var pageTo = this.name;
        loadPage("pages/" + pageTo + ".html");
    });
});

コードは後でより複雑なことを行いますが、上記を実行することさえありません。

私のフォームはこんな感じ

<FORM>
    <SPAN class='header'>Login</SPAN><BR/>
    <LABEL for='username' class='loginLabel'>Username</LABEL>
    <INPUT type='text' id='username' name='username' value='' />
    <LABEL for='password'class='loginLabel'>Password</LABEL>
    <INPUT type='password' id='password' name='password' value='' />
    <INPUT type='hidden' name='process' value='login' />
    <INPUT type='button' value='Login' name='index' id='button' />
</FORM>

シンプルなログインフォームですが、ボタンをクリックしてもコンソールにテキストが表示されません。同じコードがリンクや場合によっては他の要素を含む複数のタイプのもので機能するようにしたいので、送信ボタンとJQuery .submit（）イベントを使用したくありません。

4

7 に答える 7

12

要素がページに存在する前に、イベントハンドラーをバインドしようとしています。

フォームを追加した後、コールバックをに渡してハンドラーをバインドし.loadます。

$(document).ready(function(){
    function loadPage(url){
        $(".body").fadeOut(400, function(){
            $(".body").load(url, function() {
                $("#button").on("click", function(){
                    var pageTo = this.name;
                    loadPage("pages/" + pageTo + ".html");
                });
            });
            $(".body").fadeIn(400);
        });
    }
    loadPage("pages/login.html");
});

または、イベントの委任を使用します（ドキュメントの「直接および委任されたイベント」のセクションを参照してください）。

$(document).on("click", "#button", function(){
    var pageTo = this.name;
    loadPage("pages/" + pageTo + ".html");
});
于 2012-09-01T18:00:38.093 に答える
3

jQueryオブジェクトにはonClickメソッドがありません。を使用し.clickます。コードは次のようになります。

$("#button").click(function(){
    console.log("Clicked");
});

デモ

于 2012-09-01T17:13:27.803 に答える
3

ハンドラーをjqueryに登録するのは正しい方法ではありません...

試す

$('#button').click(function(){
   console.log('test');
});
于 2012-09-01T17:13:29.120 に答える
3

$("#button")onclickプロパティ/メソッドがないjQueryオブジェクトを返します。使用.click：

$('#button').click(function() {

});
于 2012-09-01T17:13:55.087 に答える
2

で試してみてください.on

$("#button").on('click', function(){
    console.log("Clicked");
});
于 2012-09-01T17:13:18.773 に答える
2

onclick動作をボタンに割り当てる前に、ドキュメントがロードされるのを待っていますか？割り当てを内部に変更してみてください

$(document).ready(function(...))
于 2012-09-01T17:15:18.997 に答える
1

そうではありませonclickんclick

$("#button").click();
于 2012-09-01T17:13:34.543 に答える