Unpinning a div on document click

[beggeng]

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:\[code\]$( document ).on('click', function( e ) { if( e.target.id != 'dialog-box' ){ $( ".dialog-box" ).hide(); } });\[/code\]However it hides the div even when click on the activation div. Here is the jQuery I'm using for the pin:\[code\]$(document).ready(function(){ $(".two").hover(function() { if (!$(this).data('pinned')) $(".dialog-box").toggle("slow"); });$(".two").click(function() { $(this).data('pinned', !$(this).data('pinned')); });});\[/code\]Here is a fiddle with what I have working not including the first script above:http://jsfiddle.net/XXd5t/1/