8

次のようなログインフォームがあります。

<li class="loginlink">
    <a id="showlogin" href="#">
        <span style="color: #666666">Login</span>
    </a>
    <div class="loginbox" style="display: block;">
        <fieldset>
            <label>User Name : </label>
            <input id="input" type="text" value="" name="input">
        </fieldset>
        <label>
            <span style="display: inline-block; ...;"> Password :</span>
        </label>
        <input id="password_txt" type="password" style="padding:5px;..;" 
               value="" name="password_txt">
        <p>
            <a class="loginlink" onclick="mojarra.jsfcljs(document.getElementById('headerForm'),
                     {'j_idt60':'j_idt60'},'');return false" style="color: #666666;.." 
                     href="#">Forgot Password?
            </a>

            <a class="loginlink" onclick="mojarra.jsfcljs(document.getElementById('headerForm'),
                      {'j_idt63':'j_idt63'},'');return false" style="..." 
                      href="#">Register 
            </a>
        </p>
        <div class="loginbuttons">
            <input id="loginBtn" type="submit" value="Login" name="loginBtn">
            <input id="cancellogin" type="button" value="Cancel">
        </div>
    </div>
</li>

showloginをクリックすると。jQueryを使用して表示します。好き

$('#showlogin').click(function(){
    var loginBox = $('.loginbox');
    loginBox.show();
    $('.loginbox fieldset input').focus();
    if (!loginBox.is(':hidden')) {
        validateUser();              
    }         
});

$('#cancellogin').click(function(){
    $('.loginbox').hide();        
});

function validateUser() {       
    $("#loginBtn").click(function(event){

        var userName =  $("#input").val();
        var password = $("#password_txt").val();

        if (userName == "") {                
            $.dialog({                
                message: "UserName must be entered",
                imageIcon: false,
                type: "error",
                okButtonID: "ok",
                okButtonValue: "OK"                  
            });
            return false;               
        } 
        return true;             
    }); //end of click              
} //end of validateUser()

今何が起こっているのか私がボタンをクリックすると、ボックスは次のように表示されます

画像1

ログインボタンをクリックすると、メッセージが表示されます

画像2

今、私がOKボタンをクリックすると。ボックスが消えます。

画像3

ここまでは大丈夫です。ここで、キャンセルボタンをクリックしてログインフォームを閉じたとします。そして再びフォームを開きます

画像4

次に、ログインボタンをもう一度クリックします。メッセージが表示されます 画像5

しかし、今度は[OK]ボタンをクリックすると、オーバーレイは消えますが、メッセージは消えません。なんで？私はこのようなものを手に入れます

ここに画像の説明を入力してください

今回はなぜ消えないのですか？私は何を間違っていますか？助けてください？

ありがとう

4

1 に答える 1

2

問題はあなたの機能に関係していると思いますvalidateUser()。ログインボックスを表示するたびに、ダイアログをログインボタンに表示するコードを含む新しいクリックハンドラーをバインドします。

function validateUser() {       
    $("#loginBtn").click(function(event){
    ...
    });
}

これは、ログインボックスが2回表示されるときに、ダイアログが実際に2回表示されることを意味します。3回目のダイアログは3回表示されます。あなたがそれを中心に置いているので、あなたはおそらくこれを見ることができません。行の後にJavascriptalert()関数をドロップする$.dialog.createUI = function (config) {と、ログインが2回表示されたときに、2つのアラートが表示されます。この問題の例については、フィドルを参照してください。

コードがユーザー検証関数内で他のことを行わない限り、この関数を削除し、代わりにドキュメントの準備ができたらクリックハンドラーをバインドすることをお勧めします。したがって、次のような結果になります。

$(document).ready(function () {

    $("#loginBtn").click(function (event) {

        var userName = $("#input").val();
        var password = $("#password_txt").val();

        if (userName == "") {
            $.dialog({
                message: "UserName must be entered",
                imageIcon: false,
                type: "error",
                okButtonID: "ok",
                okButtonValue: "OK"
            });
            return false;
        }
        return true;
    });

    $('#showlogin').click(function () {
        var loginBox = $('.loginbox');
        loginBox.show();
        $('.loginbox fieldset input').focus();
        // code to call validate user removed from here!
    });

    $('#cancellogin').click(function () {
        $('.loginbox').hide();
    });
});
于 2012-08-28T13:03:01.370 に答える