Jquery - Select and deselect elements on the page

Question

I have a screen with several Ivs that are draggable.

However, I need that when the user clicks on them, it creates an edge around it and adds some options (delete, for example).

But I want that when he clicks off this element, that that edge goes out and also the options disappear.

I’m trying it this way, but instead of taking what was clicked, he takes the Document:

$(document).click(function() {

var objeto = $(this);

if( objeto.prop('class') == "adesivo" ||  objeto.prop('class') == "quadro")
{
    selecionaElemento(objeto);
}
else
{
    deselecionaElementos();
}});

The function selecionaElemento(objeto) does the following:

function selecionaElemento(objeto){
  objeto.css("border", "1px solid #F00");
}

And the de-ElectionElements() does the following:

function deselecionaElementos(){
   $('.adesivo').css("border", "none");
   $('.quadro').css("border", "none");
}

What I’m doing wrong that instead of taking the element it takes the Document?

Answer 1

Indicates a jQuery event to add a class to the clicked element, and remove from all and add one to $(this).

$(document).on('click','.div',function(){
  var $this = $(this);
  $('.div').removeClass('selected');
  $this.addClass('selected');
});

$('body').click(function() {
  $('.div').removeClass('selected');
});

.div{
width:40px;
height:40px;
background-color:#ccc;
border:1px solid #000;
}
.selected{

background-color:#222;
border:1px solid #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='div'>1</div>
<div class='div'>2</div>
<div class='div'>3</div>
<div class='div'>4</div>