2013-03-17 6 views
2

링크를 클릭 할 때 나타나는 로그인 양식을 만들고 있습니다. 그런 다음 다른 사람이나 로그인 링크를 클릭하면 로그인 양식이 사라지 길 원합니다. 그러나 jQuery .not() 함수와 함께 :not() 셀렉터를 사용하려고해도 모든 요소를 ​​대상으로합니다 (선택 항목에서 지정한 요소는 제거되지 않습니다).
코드를 살펴 보려면 jsFiddle을 확인하십시오. 당신은 로그인 링크를 클릭하면, 그 요소를 제거하기 위해 .not() 함수를 사용하고 있는데도, .click() 문 때문에 즉시 나타납니다. 양식에서 선택하십시오. 로그인 양식과 그 안에있는 항목을 클릭하면 .not()으로 제거 되더라도 사라집니다..not() not working

는 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> 

자바 스크립트 : 귀하의 문제는 이벤트가 버블 링되는

$("#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

는 클릭 이벤트는 DOM을 bubles 당신이 당신의하지() 호출을 배제하지 않았다 요소 안타 . 대신 이벤트 처리기를 사용하여 클릭 소스를보고 거기에서 취소하십시오.

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

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

+0

감사합니다! 이벤트 버블 링과 관련이있을 거라고 생각했는데 ... – cpdt