1

この関数が再び自分自身を呼び出さないようにするにはどうすればよいですか？ 

$(document).ready(function() {  
    login();
});

function login() {
    $('#login').hide();
    $('#pre-login button').on('click',function(event) {
        $('#pre-login').hide();
        $('#login').show();
        $('#login :text').focus();
        return false;
    });
}

私には次の2つの形式があります。

<form id="pre-login"><p>Already have an account?</p><button type="submit">Login</button></form>
<form id="login">
    <input type="text" placeholder="Email Address" class="login">
    <input type="password" placeholder="Password" class="login"><h4><a href="#">Forgot?</a></h4>
    <button type="submit" class="action">Login</button>
</form>

最初のフォームはページが読み込まれたときに表示され、2番目のフォームは非表示に設定されます。最初のフォームのログインボタンをクリックすると、2番目のフォームが表示され、最初のフォームが非表示になります。ただし、＃pre-loginフォームのボタンがクリックされたときにのみ関数を呼び出すようにjQueryに指示している場合でも、2番目のフォームのログインボタンをクリックすると逆の効果が発生します。

ここで何が起こっているのか頭や尾を作ることができないので、一度呼び出されたら関数を無効にするのが最善だと思います。

4

3 に答える 3

4

one次の方法を使用できます。

要素のイベントにハンドラーをアタッチします。ハンドラーは、要素ごとに最大1回実行されます。

function login() {
    $('#login').hide();
    $('#pre-login button').one('click',function(event) {
        $('#pre-login').hide();
        $('#login').show();
        $('#login :text').focus();
        return false;
    });
}
于 2012-09-21T21:39:48.167 に答える
3

あなたが見ているものを引き起こしているのはJavascriptであると確信していますか？これを基本的なjsFiddleで設定すると、2番目のログインボタンがページをリロードしている（そしてログインフォームデータを送信している）ように見えます。したがって、ページは初期状態にリセットされます。これにより、Javascriptが再び非表示になっているように見えますが、実際には、指示されたとおりに実行されます。つまり、非表示になります。

Javascriptを使用する場合は、FirefoxのFirebug、またはChromeの開発者ツールを使用してください。Javascriptをステップ実行し、リクエストを監視して何が起こっているかを確認できます。

私の推測では、ログインを受け入れ、ユーザーがログインしたときに「ログイン」メッセージを表示するために追加のチェックを入れると、すべてが期待どおりに機能します。

于 2012-09-21T21:56:34.657 に答える
1

.one（）を使用できます。これにより、イベントが1回だけ実行されるようになります。

$(document).ready(function() {  
    login();
});

function login() {
    $('#login').hide();
    $('#pre-login button').one('click',function(event) {
        $('#pre-login').hide();
        $('#login').show();
        $('#login :text').focus();
        return false;
    });
}

//クリックイベントの実行時にバインドを解除することもできます。

function login() {
        $('#login').hide();
        $('#pre-login button').one('click',function(event) {
            $('#pre-login').hide();
            $('#login').show();
            $('#login :text').focus();
            $(this).unbind();
            return false;
        });
    }
于 2012-09-21T22:01:33.133 に答える