How to hide a div when I click outside of it - html

Question

Tough this issue is similar to many others I found here,I cannot find a proper answer that can work to me.
All of my content is loaded using .ajax() method, and events are handled using .on().
First I've tried to stop the propagation of the function using .stopPropagation(),it works in a way.Its closing the div,but after that any element I press it still using the closing function.I've found out by searching on the web that I need to use .off() method.
Here is the code(made it shorter):
$("#pnNotaCom").on("click",function(){
$(".cautareProdNouNC").css({"display":"block"});
$("html").on("click",function(){
$(".cautareProdNouNC").css("display","none");
});
});
$(".cautareProdNouNC").click(function(e){
e.stopPropagation();
});
$("#pnNotaCom").click(function(e){
e.stopPropagation();
});
The div I am showing/hiding is .cautareProdNouNC

Answer 1

This is how I would do it. When you activate your div, you activate invisible div that fulfills whole body. Clicking on that div hides them both.
HTML
<div class="cautareProdNouNC display_none"></div>
<div class="overlay display_none"></div><!--place it in body-->
CSS
.cautareProdNouNC {
position relative; /*this div needs to be above overlay so needs z-index*/
z-index: 200;
}
.display_none {
display: none;
}
.overlay {
background: transparent;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
jquery
$("#pnNotaCom").on("click",function(){
$(".cautareProdNouNC").removeClass('display_none');
$(".overlay").removeClass('display_none');
});
$(".overlay").on("click",function(){
$(this).addClass('display_none');
$(".cautareProdNouNC").addClass('display_none');
}

Answer 2

$(document).delegate('click', function(){
if($('#Div2Hide').get(0) != $(this).get(0)){
$('#Div2Hide').hide();
e.stopPropagation();
}
});

Answer 3

try this
$(document).mouseup(function (e) {
var container = $(your hiding div selector here);
if (!container.is(e.target) // if the target of the click isn't the container...
&&
container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.hide();
}
});

Answer 4

I hope I understand your question right!
What about this DEMO:
$(document).ready(function() {
var div_hide = false;
$("#one").on("click",function(e){
e.stopPropagation();
alert("You click the div");
$(document).on("click",function(){
if (div_hide === false) { // You can click once after that
// we set "div_hide" to "true"
$(".hide_me").hide();
div_hide = true;
}
return false;
});
});
});