.not()不起作用

时间:2013-03-17 06:52:54

标签: javascript jquery jquery-selectors

我正在创建一个单击链接时出现的登录表单。然后,当我点击其他任何内容或登录链接时,我希望登录表单消失。但是,当我尝试使用jQuery .not()函数以及:not()选择器时,它仍然会定位所有元素(它不会删除选择中指定的元素)。
如果您想查看代码,请查看jsFiddle。正如您在小提琴中看到的那样,当您单击“登录”链接时,它会显示,但由于.click()语句,即使我使用.not()函数删除选择中的元素和登录表单中的元素。点击登录表单及其中的项目也会使其消失,即使它们已被.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);
}

1 个答案:

答案 0 :(得分:4)

你的问题是事件冒泡,点击事件会破坏dom并点击你没有用not()调用排除的元素。而是使用事件处理程序来查看点击源,并在那里取消。

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

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