Unpinning A Div On Document Click

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: $(

Solution 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'));
});