2

リンクをクリックすると表示されるログインフォームを作っています。次に、他の何かまたはログインリンクをクリックすると、ログインフォームが消えるようにします。ただし、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);
}
4

1 に答える 1

4

問題はイベントのバブリングです。クリック イベントが dom をバブリングし、not() 呼び出しで除外しなかった要素にヒットします。代わりに、イベント ハンドラーを使用してクリックのソースを確認し、そこでキャンセルします。

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

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

于 2013-03-17T06:59:15.643 に答える