2013-03-17 71 views
2

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

回答

4

您的问题是事件冒泡,单击事件bubles了DOM和打你没有你不是()调用排除元素。而是使用事件处理程序来查看点击来源并取消它。

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

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

+0

谢谢!我认为这可能与事件冒泡有关...... – cpdt 2013-03-17 07:02:24