.not（）不起作用

Question

I am making a login form that appears when you click a link. I then want the login form to disappear when I click on anything else, or the login link. However, when I attempt to use the jQuery .not() function, and also the :not() selector, it will still target all elements (it will not remove the elements specified from the selection).
If you want to take a look at the code, check out the jsFiddle . As you can see in the fiddle, when you click on the Login link, it appears, but then immediately fades away, because of the .click() statement, even though I am using the .not() function to remove that element, and the elements in the login form, from the selection. Clicking on the login form and the items inside it will also make it disappear, even though they are being removed with .not() .

HTML:

<a id="login" href="javascript:void(0);" title="Login">Log in</a>
<div id="loginform" style="display:none;">
    <form action="login.php" method="POST">
        <input type="text" name="uname" id="uname" placeholder="Username" />
        <input type="password" name="pword" id="pword" placeholder="Password" />
        <input type="submit" id="loginbtn" value="Login" />
    </form>
</div>

Javascript:

$("#login").click(function() {
    $("#loginform").fadeToggle("slow");
    if ($("#login").text() == "Log in") {
        $("#login").text("Close");
        $("body, body *").not("#login, #loginform, #loginform *").bind("click", closeLoginForm);
    }
    else $("#login").text("Log in");
});
function closeLoginForm() {
    $("#loginform").fadeOut("slow");
    $("#login").text("Log in");
    $("*").unbind("click", closeLoginForm);
}

Answer 1

Your problem is event bubbling, the click event bubles up the dom and hits an element you didn't exclude with your not() call. instead use the event handler to see source of the click an cancel it there.

if ($(e.target).is("#login, #loginform, #loginform *")) return;

http://jsfiddle.net/ZgYcV/2/