jquery window.click not working first time

page here: http://webpages.marshall.edu/~glasser1/jquery.html

I'm trying to replicate the old twitter page login style. If the user clicks on "sign in" it should open a box for them to sign in, and if they click "sign in" again it should hide itself. In addition, if the user clicks inside of the 'log in' box, that's okay and the box should remain, but if the user clicks OUTSIDE of the box, it should hide itself.

What I can't explain is that if your first click is the "sign in" text, and your second click is the log in box, the box hides when it shouldn't. however, this only happens if those are your first two clicks. After those initial clicks, everything works as intended.

Here is the code:

$("#logoncontent, #loginerror, #success").hide();
$(window).load(function(){
    //click "sign in" to toggle login box
    $("#signincontainer").click(function(e){
            $("#logoncontent").slideToggle(400);
            //stop prop from reaching parents up dom tree
            e.stopPropagation();
            // return false so that the click of "sign in" doesn't also trigger the $(window).click function below
            return false;
    });
    //if there is a click in the window
    $(window).click(function(){
        //if that click in the window was INSIDE of the box, break out of this function
        $("#logoncontent").click(function(){
            //breaking out of function
            return false;
        });
        开发者_JS百科//if the click was outside of box, slide content up
        $("#logoncontent").slideUp(400);
    });
});     

Again, you can test the page here: http://webpages.marshall.edu/~glasser1/jquery.html

Thanks in advance and if you can't reproduce the error, let me know. As I said, it works if those aren't your first two clicks.

Bob G

---

Your problem is below:

$(window).click(function(){
    //this part means that on the first click this handler is assigned
    $("#logoncontent").click(function(){
        //breaking out of function
        return false;
    });
    //if the click was outside of box, slide content up
    $("#logoncontent").slideUp(400);
});

You need to move

    $("#logoncontent").click(function(){
        //breaking out of function
        return false;
    });

inside of the load handler for window, not in the click handler. The way it is now, the click handler for logoncontent is only assigned on the first window click, explaining the fact that your problem only happens at first.

---

I think you remove "e.stopPropagation();"

---

I decided to put together an example of how I would tackle this problem, taking a slightly different approach to yours. On the click event bound to the window, I check if the clicked element is inside the box or not, and hide the box if it isn't.

http://jsbin.com/okiqe6