close div when clicking outside it

I have a div with a botão inside to close it . At first it is display: none , but clicking on a button in another div , it becomes display: block .

I need to find a way for when it is display: block , and if by clicking on something other than div ( or within div ), then a click is triggered on the date button.

I tried the following code:

$(document).on('click', function(e) {       

    alert($("div.peca").css("display"));  //retorna none

    if ( $("div.peca").css("display") === "block" ) {

          alert($("div.peca").css("display"));  //retorna block

          $("div.peca button.fechaPeca").trigger("click");

    }  

});

But when I click on the button that makes it display: block , it already comes that it is display: block and then it finishes closing automatic.

What to do in this case?

I know the error is on this line :

$("div.peca button.fechaPeca").trigger("click");

Well I commented on it and put a alert in place and it worked.

I’ve also tried:

  $("div.peca button.fechaPeca").click();

Same thing.

But no idea why this error is occurring. That is, botões stops accepting click

Another text I made was

$(".fechaPeca").on("click", function() {

    $("div.pecaGas").css("display","block");
    $("div.peca").css("display","none");

})

replace with

$(".fechaPeca").on("click", function() {

        alert();

})

alert() worked.

But,

    $("div.pecaGas").css("display","block");
    $("div.peca").css("display","none");

Does not work when accessing the

    $(".fechaPeca").on("click"

Through another click

You can use e.target to know which element is clicked and whether it is within the element you are looking for.

You can use the e.target.closest(seletor) that goes up in the DOM until you find a seletor CSS. If you do not find out you are out of this element. Or you can have an element and use el.includes(e.target) that tells you if a given element has e.target .

For example:

$(document).on('click', function(e) {
  var dentroPeca = e.target.closest('.peca');
  console.log(dentroPeca ? 'Dentro!' : 'Fora!');
});

div.peca,
div.outra {
  padding: 20px;
  border: 1px solid #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="peca">
  <p>Peça</p>
</div>

<div class="outra">Outra</div>

After viewing the site that you mentioned in the comments, I believe that what you are looking for is something like this: link

But the problem with the code is that when you click on .encomende it also triggers $(document).on('click', function(e) { and since that .encomende is not within e.target.closest('div.peca') you end up creating a closed circle where div.peca opens and closes immediately.

In other words:

When you click this side button, what runs first is $(".encomende").on("click" , div.peca is visible. Then it is called $(document).on('click' which finds div.peca visible and re-caches it via .trigger() that works. Change the if (dentro == null) to if (dentro == null && !e.target.classList.contains('encomende')) .

That is, joining the condition !e.target.classList.contains('encomende') guarantors that .trigger("click") will not be run if e.target clicked has class encomende .

You can do this in the following diagram:

Include in this selector the elements you do not want to close div when clicked (change class .botaoAbrir to element class that opens div ):

$(".botaoAbrir, div.peca, div.peca button.fechaPeca").on('click',function(e){
    e.stopPropagation();
});

And add a listener that will close the div (if it is visible) when you click anywhere on the page except the selectors included in the above listener:

$(document).on('click',function(){
    $("div.peca button.fechaPeca").trigger("click");
});

Test:

$(document).on('click',function(){
	$("div.peca button.fechaPeca").trigger("click");
});

$(".botaoAbrir, div.peca, div.peca button.fechaPeca").on('click',function(e){
	e.stopPropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="peca" style="padding: 20px; color: #fff; display: none; text-align: center; float: left; width: 300px; height: 200px; background: red;">
  Clique fora do box vermelho ou no botão "Fechar" para fechar o box.
  <br />
  <br />
	<button class="fechaPeca" onclick="$('div.peca').hide()">Fechar</button>
</div>

<div>
	<button class="botaoAbrir" onclick="$('div.peca').show()">Abrir</button>
</div>