Question

I have a div that toggles on hover and gets pinned on click. I’m trying to add a function that unpins the div when the user clicks on the rest of the page.

I tried using this:

$( document ).on('click', function( e ) {
   if( e.target.id != 'dialog-box' ){
      $( ".dialog-box" ).hide();
   }   
});

However it hides the div even when click on the activation div.

Here is the jQuery I’m using for the pin:

$(document).ready(function(){
    $(".two").hover(function() {
        if (!$(this).data('pinned')) $(".dialog-box").toggle("slow");
    });
$(".two").click(function() {
    $(this).data('pinned', !$(this).data('pinned'));
    });
});

Here is a fiddle with what I have working not including the first script above:

http://jsfiddle.net/XXd5t/1/

Answer 1

Just stop event bubbling when you click on the div, that way you know if a click event gets to the document, it wasn’t from clicking on the div.

http://api.jquery.com/event.stopPropagation/

$( document ).on('click', function( e ) {
    $( ".dialog-box" ).hide();
});

$(".two").click(function(e) {
    e.stopPropagation();
    $(this).data('pinned', !$(this).data('pinned'));
});