Div(消息框)没有在运行时使用jQuery隐藏

我有一个登录表格如下.

<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()

现在发生了什么,假设我点击按钮,显示的框就像

现在,如果我点击登录按钮,则会显示消息

现在,如果我点击确定按钮.盒子消失了.

事情还可以.现在假设我通过单击取消按钮关闭登录表单.再次打开表格

现在再次单击登录按钮.将显示该消息

但是现在这次如果我点击确定按钮,那么叠加层就会消失,但消息却没有.为什么？我得到这样的东西

为什么这次不会消失？我做错了什么？请帮忙？

谢谢

解决方法

我认为这个问题与您的validateUser()函数有关.您会在每次显示登录框时看到绑定一个新的单击处理程序,该处理程序包含显示登录按钮对话框的代码.

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

这意味着第二次登录框显示对话框实际显示两次.对话框第3次显示3次.你可能看不到这个,因为你的中心.如果您在$.dialog.createUI = function(config)行之后删除Javascript alert()函数{您将看到第二次显示登录信息时会收到2个警报！有关此问题的示例,请参见fiddle.

除非您的代码在验证用户函数中执行其他操作,否则我建议您删除此函数,然后在文档准备好时绑定单击处理程序.所以你最终得到这样的东西：

$(document).ready(function () {

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

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

        if (userName == "") {
            $.dialog({
                message: "UserName must be entered",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();
    });
});

Div(消息框)没有在运行时使用jQuery隐藏

解决方法

猜你在找的CSS相关文章