jquery – close div when clicking outside of it

Question:

I have a div with a botão inside to close it . At first, it has display: none , but when clicking a button in another div , it turns into display: block .

I need to find a way when it is display: block , and if by incident I click on anything other than the div ( or inside the div ), then a click is fired on the button that closes it.

I tried 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's already display: block and then it closes automatically.

What to do in this case?

I know the error is on this line :

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

Well, I commented it and put an alert in place and it worked.

I also tried:

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

Same thing.

But I have no idea why this error is occurring. That is, the botões stop 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 I access the

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

Through another click

Answer:

You can use e.target to find out which element is clicked and if it is inside the element you are looking for.

You can use the e.target.closest(seletor) which goes up in the DOM until it finds a CSS seletor . If you don't find it, you know you're out of that element. Or you can have an element and use el.includes(e.target) which tells you if a given element has e.target inside.

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>
<div class="peca">
  <p>Peça</p>
</div>

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

After seeing the site you mentioned in the comments I think what you're looking for is something like this: http://jsfiddle.net/Sergio_fiddle/0sjc49jf/2/

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

In other words:

When you click on this side button, what runs first is $(".encomende").on("click" , then div.peca is visible. Then it is called $(document).on('click' which finds the div.peca visible and hide it again via .trigger() which 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') guarantees that the .trigger("click") will not be run if the clicked e.target has the class encomende .

Post Views: 4
Scroll to Top