Question

This is a stupid question, but i can’t figure it out, say i have two divs:

<div class="one"></div>
<div class="two"></div>

Div one is a button, div two is a box.

Now when i click on div one div two should be visible (by default it isn’t)

And when i click on div one one more time div two disappears and so on…

Here is my code for that:

$(".one").live("click", function(){
    state = $(this).attr("state");

    if(state == "active"){
        $(this).attr("state", "inactive");
        $(".two").css("display", "none");
    }else{
        $(this).attr("state", "active");
        $(".two").css("display", "block");
    }
});

And now my problem is that i also want div two disappear when i click anywhere in my page so this is what i did:

$(document).click(function(){
     $(".one").attr("state", "inactive");
     $(".two").css("display", "none");
});

Now what happens is probably click event on document happens after the click on div and it doesn’t let me open box.

One solution that i know is to check if (event.target.className != "one") but i would really like to avoid that since in my real project i have a lot of other elements in that button so i would need to include all of them, and i would like to avoid that.

Answer 1

return false; from the bound .live() handler. You want to stop event propagation and that is the way to break the chain for live events (which have already bubbled).