Div(message box) is not hiding at runtime using jQuery

Question

I have a login form as following. ```

User Name :

Password :

``` When you click on…

Accepted Answer

I think the problem relates to your `validateUser()` function. You see every time you show the login box you bind a new click handler that contains the code to show the dialog to the login button.

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

This means the 2nd time the login box is show the dialog is actually shown twice. The 3rd time the dialog is shown 3 times. You probably can't see this because your centering it. If you drop a Javascript `alert()` function after the line `$.dialog.createUI = function (config) {` you'll see the 2nd time the login is shown you get 2 alerts! See fiddle for example of this problem.

Unless your code does something else within the validate user function I suggest you drop this function and instead bind the click hander when the document is ready. So you end up with something like this:

```
$(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();
    });
});
```

Div(message box) is not hiding at runtime using jQuery

Solution

Problem