0

Quiero efectuar tres acciones en un div. La primera es que si seleccionan cualquier parte del contenedor de un "tema publicado" los lleve al detalle del tema. Si precionan en ocultar o eliminar que se envien parametros post a un archivo y se ejecute la peticion php. Esto ultimo ya lo logre, de forma indiviual, pero al mezclar los clicks de jquery tengo el siguiente problema:

Si doy clic en el div que tiene el foro, me lleva sin problemas con get a su información, pero si doy click en ocultar o eliminar, si envia los parametros y ejecuta lo que quiero, pero a su vez tambien ejecuta y detecta el "click" del div padre.

Mi codigo aqui (La validación de php es para ver si usuario logueado publico el tema, y así ver si le muestra las opciones de borrar y ocultar):

     <div class="div_contenido_temas" id="<?php echo $tema["idForum"];  ?>" name="Si">
          <div class="div_encabezado">
            <div class="div_titulo">
              <h1 class="margen_0"> <?php echo $tema["title"]; ?> </h1>
            </div>

            <?php
              if($tema["idUser"] == $_SESSION["idUsuario"]){
                ?>
                  <div class="div_botones_encabezado">
                    <div class="div_boton_accion">
                      <button class="ocultar_buton" type="button" id="ocultar">Ocultar</button>
                    </div>
                    
                    <!---
                    <div class="div_boton_accion">
                      <button class="editar_buton" type="submit" name="editar">Editar</button>
                    </div>  -->

                    <div class="div_boton_accion">
                      <button class="eliminar_buton" value="<?php echo $tema["idForum"];  ?>" id="eliminar">Eliminar</button>
                    </div>
                  </div>
                <?php
              }
            ?>
          </div>

Aqui el código de Jquery:

$(".div_contenido_temas").on('click',function(){ 
var temaSeleccionado = document.getElementById(this.id); 
window.location.href="Foro_Detalle_Tema.php?idForum="+temaSeleccionado.id;  });

$("#ocultar").on('cli', function(){
$.ajax({
  type: "post",
  url: "BE_Prueba.php",
  data: {
    "idForum": this.id,
    "ocultar": "ocultar",
  },
  beforeSend: function(status){
    
  },
  success: function(respose){
    console.log(respose);
  },
  error: function(error){
    alert(error);
  }
}); });


$("#eliminar").on(function(event){
$.ajax({
  type: "post",
  url: "BE_Prueba.php",
  data: {
    "idForum": event.target.value,
    "eliminar": "eliminar",
  },
  beforeSend: function(status){
    alert(event.target.value);
  },
  success: function(respose){
    console.log(respose);
  },
  error: function(error){
    alert(error);
  }
}); });

introducir la descripción de la imagen aquí

1 respuesta 1

0

Tienes que detener la propagación del evento usando stopPropagation

Nota: Antes se usaba event.cancelBubble = true; pero este método está obsoleto (ver aquí)

Ejemplo SIN usar stopPropagation, donde veras que en la consola imprime 1 y 2, es decir se ejecuta tanto el evento del div como del button

$(".div_contenido_temas").on('click',function(){ 
   console.log(1);
});

$("#ocultar").on('click', function(){
console.log(2);
});
.div_contenido_temas{
width:100%;
height:200px;
background-color:blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="div_contenido_temas">
<button class="ocultar_buton" type="button"  id="ocultar">Ocultar</button>
</div>

Ejemplo CON stopPropagation

$(".div_contenido_temas").on('click',function(){ 
   console.log(1);
});

$("#ocultar").on('click', function(){
event.stopPropagation();
console.log(2);
});
.div_contenido_temas{
width:100%;
height:200px;
background-color:blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="div_contenido_temas">
<button class="ocultar_buton" type="button"  id="ocultar">Ocultar</button>
</div>

1
  • Me solucionó el el problema, es justamente lo que no lograba encontrar. Muchas gracias el 4 dic. 2022 a las 0:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.