Question

I am trying to hide a div after a user clicks on the document.

<div class="active">
   <a class="agree" href="javascript:;">I Agree</a>
   <a class="disagree" href="javascript:;">Disagree</a>
</div>

Using the following solution –

var mouseOverActiveElement = false;

$('.active').live('mouseenter', function(){
    mouseOverActiveElement = true; 
}).live('mouseleave', function(){ 
    mouseOverActiveElement = false; 
});
$("html").click(function(){ 
    if (!mouseOverActiveElement) {
        //Do something special
    }
});

My problem is how can I unbind the html so that contents inside the do something special stop firing annd the whole thing starts again ?

At the moment – the html.click(); keeps firing everytime ?

Answer 1

Try this

    var mouseOverActiveElement = false;

    $('.active').live('mouseenter', function(){
        mouseOverActiveElement = true; 
    }).live('mouseleave', function(){ 
        mouseOverActiveElement = false; 
    });
    $("html").click(function(){ 
        if (!mouseOverActiveElement) {
            //Do something special
            mouseOverActiveElement = false;

//If you want to unbind html click event then use $("html").unbind('click');
        }
    });