How to hide div when clicking anywhere on the jquery page?

Navigation
-2

I have a script that shows a div I currently have to show when I click and hide when I click but I want to open the user when I click on any part of the page Hide the div Can anyone help?

Jquery 

$(document).ready(function(){

    $("body").click(function(){
        $('#opcoes-'+id_agente+'').hide();
    });

    $("body").on('click', '#botao_ver_opcoes', function(e) {
        var id_agente = $(this).data("id-agente");
        $('#opcoes-'+id_agente+'').toggle();
        event.stopPropagation();
    });

    $('#opcoes-'+id_agente+'').hide();
});

HTML 

<div id="opcoes-{{ $agent_tree->user_id }}" style="width: 130px; margin-top: 30px; background-color: white; border: 1px solid #c2c5cd; z-index: 10; position: absolute; display: none; border-top: none;">
    <!--<div data-toggle="modal" data-target="#modal-add-credito" id="add-credito-btn" data-id-agente="{{ $agent_tree->user_id }}" data-id-line="{{ $agent_tree->credit_line }}" style="text-align: center; line-height: 30px; cursor: pointer;">TRANSFERIR</div>-->
    <div data-toggle="modal" data-target="#modal-info-agente" id="info-user-btn" data-id-agente="{{ $agent_tree->user_id }}" style="text-align: center; line-height: 30px; cursor: pointer;">INFORMAÇÕES</div>
    <!--<div data-toggle="modal" data-target="#modal-update-senha" id="change-pwd-btn" data-id-agente="{{ $agent_tree->user_id }}" style="text-align: center; line-height: 30px; cursor: pointer;">SENHA</div>
    <div style="text-align: center; line-height: 30px; cursor: pointer;">MENSAGEM</div>-->
</div>
    
asked by anonymous 11.04.2017 / 15:55

1 answer

0

How to hide div when clicking anywhere on the jquery page

In your code snippet instead of body it has to be document 

$("body").click(function(){
    $('#opcoes-'+id_agente+'').hide();
});

It has to be this way 

 $(document).click(function(){
    $('#opcoes-RESULTid_agente').hide();
 });


$(document).ready(function(){

    $(document).click(function(){
        $('#opcoes-RESULTid_agente').hide();
    });
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><divid="opcoes-RESULTid_agente" style="width: 130px; margin-top: 30px; background-color: white; border: 1px solid #c2c5cd; z-index: 10; position: absolute; border-top: none;">
    <!--<div data-toggle="modal" data-target="#modal-add-credito" id="add-credito-btn" data-id-agente="{{ $agent_tree->user_id }}" data-id-line="{{ $agent_tree->credit_line }}" style="text-align: center; line-height: 30px; cursor: pointer;">TRANSFERIR</div>-->
    <div data-toggle="modal" data-target="#modal-info-agente" id="info-user-btn" data-id-agente="{{ $agent_tree->user_id }}" style="text-align: center; line-height: 30px; cursor: pointer;">INFORMAÇÕES</div>
    <!--<div data-toggle="modal" data-target="#modal-update-senha" id="change-pwd-btn" data-id-agente="{{ $agent_tree->user_id }}" style="text-align: center; line-height: 30px; cursor: pointer;">SENHA</div>
    <div style="text-align: center; line-height: 30px; cursor: pointer;">MENSAGEM</div>-->
</div>
  

Now how to reference the id in the function to match the id of the div is another question

    
11.04.2017 / 16:01
How would regex look to handle this case? [closed] select does not work [duplicate]