click function stopPropagation

Question

click function stopPropagation

Navigation

#1 by (1 votes)

0

I have a function that when clicking a button displays a div with some information and use e.stopPropagation because I create another function that when clicking anywhere in html I hide the div again the thing is that the click is propagated to div that I want to show and I do not want it to do so because that div also need to click for other functions and here my code for them to understand better

$('.likes .inbox').click(function(e) {
  e.stopPropagation();
  $(".inbox-desplegate").stop().slideToggle();
  $('#send-inbox-input').focus();
})

$("html").click(function() {
  $(".inbox-desplegate").hide();
})

.inbox-desplegate-content {
  min-height: 150px;
  border: solid 1px lightgrey;
}

.inbox-desplegate {
  max-width: 300px;
  position: absolute;
  width: 100%;
  min-height: 200px;
  background: white;
  top: 90px;
  left: 0;
  border-radius: 10px;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.176) !important;
  z-index: 3;
  border: solid 1px lightgrey;
  display: none;
}

.inbox-desplegate-footer {
  position: relative;
  bottom: 0;
}

.likes {}

<link 
  rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
  integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
  crossorigin="anonymous">

<!--this div contain the listener on click-->
<div class="col-4 text-center likes">
  <a href="#" class="inbox"> <big><i class="fa fa-inbox"></i></big> Inbox </a>
</div>

<!--this div is the one hidden-->
<div class="inbox-desplegate" id="inbox-desplegate">
  <div class="card-header p-3">
    <span class="header-title">Send message</span>
    <button 
      type="button" class="close mb-2"
      data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </div>
    <div class="card-body inbox-desplegate-content" >
    </div>
    <div class="card-footer  inbox-desplegate-footer">
      <form class="form-group">
        <div class="input-group mb-3">
          <input 
            type="text" class="form-control"
            placeholder="type message"
            aria-label="Recipient's username"
            aria-describedby="button-addon2" id="send-inbox-input">
          <div class="input-group-append">
            <button 
              class="btn btn-primary"
              type="button"
              id="button-addon2"><i class="fa fa-location-arrow"></i></button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

<script 
  src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

As you saw when you click on inbox it displays well and when you click on any part of the html except in inbox the div is hidden, I want to tell you by code that the click of the html function does not propagate to the div that is displayed what would be the solution? thanks in front of friends hands!

jquery

asked by andy gibbs 21.09.2018 в 01:15

source

1 answer

Hide a div by showing another I have a form and the button is not generating any action I leave the code with which I am executing

score 1 · Accepted Answer

Based on what I understood that you want to achieve, I leave you a possible solution. Maybe it's not the best but it could help you in something.

$('.likes .inbox').click(function(e) {
  e.stopPropagation();
  $(".inbox-desplegate").stop().slideToggle();
  $('#send-inbox-input').focus();
})

$("html").click(function() {
  $(".inbox-desplegate").hide();
})



// Necesario para poder cerrar el modal
$(".close").click(function() {
   $(".inbox-desplegate").hide();
})

// Necesario para evitar que se cierre el modal al hacer click encima
$(".inbox-desplegate").click(function(e){
    e.stopPropagation();
});

// Ejecutar acción dentro del modal
$("#button-addon2").click(function(e){
    //e.stopPropagation();
    console.log('Send Message');
});

.inbox-desplegate-content {
  min-height: 150px;
  border: solid 1px lightgrey;
}

.inbox-desplegate {
  max-width: 300px;
  position: absolute;
  width: 100%;
  min-height: 200px;
  background: white;
  top: 90px;
  left: 0;
  border-radius: 10px;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.176) !important;
  z-index: 3;
  border: solid 1px lightgrey;
  display: none;
}

.inbox-desplegate-footer {
  position: relative;
  bottom: 0;
}

.likes {}

<link 
  rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
  integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
  crossorigin="anonymous">

<!--this div contain the listener on click-->
<div class="col-4 text-center likes">
  <a href="#" class="inbox"> <big><i class="fa fa-inbox"></i></big> Inbox </a>
</div>

<!--this div is the one hidden-->
<div class="inbox-desplegate" id="inbox-desplegate">
  <div class="card-header p-3">
    <span class="header-title">Send message</span>
    <button 
      type="button" class="close mb-2"
      data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </div>
    <div class="card-body inbox-desplegate-content" >
    </div>
    <div class="card-footer  inbox-desplegate-footer">
      <form class="form-group">
        <div class="input-group mb-3">
          <input 
            type="text" class="form-control"
            placeholder="type message"
            aria-label="Recipient's username"
            aria-describedby="button-addon2" id="send-inbox-input">
          <div class="input-group-append">
            <button 
              class="btn btn-primary"
              type="button"
              id="button-addon2"><i class="fa fa-location-arrow"></i></button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

<script 
  src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>