2

Estoy creando una etiqueta en forma de una barra que contiene iconos, esta etiqueta tiene un evento click asociado que al activarlo me muestra un detalle. Ahora, el problema surge cuando quiero darle un evento click al icono, los cuales están contenidos dentro de la etiqueta mencionada y no se activa su evento, mas se activa el evento de la etiqueta padre.

Quiero evitar mover el icono fuera de la etiqueta y quisiera saber si hay una forma de hacer que su evento se active obviando el evento de la etiqueta que lo contiene.

Esta es mi etiqueta con un evento click la cual muestra un detalle en otra parte de la página:

<div class="bar-agent" onclick="show_detail_agent();">
    <p class="agent-data"></p>
    <span id="delete_agent" class="icon-delete">
        <img src="img/trash.png" alt="">
    </span>     
</div>

Lo que intento hacer es acceder al evento click del span con id="delete_agent" para que elimine esta etiqueta. Pero al estar contenida dentro de la etiqueta con class="bar-agent" no me deja acceder al span.

function _delete_agent(){
    $(".content-agents .bar-agent-content .bar-agent").on("click","#delete_agent", function(){
        console.log("aqui!");
    });
}
1
  • Hola, podrías editar tu pregunta y añadirnos tu código? Veríamos como lo tienes montado y que se le puede hacer, gracias. el 14 ago. 2016 a las 21:29

1 respuesta 1

2

Problema

Cuando se quiere usar el selector de para muchas clases, se deben separar con comas. Por ejemplo, para seleccionar todos los elementos de la clase content-agents Y todos los de bar-agent-content Y los de bar-agent:

$(".content-agents, .bar-agent-content, .bar-agent")

Sin embargo, al seleccionar de esta forma, se asocia el evento al div principal, algo que no nos permitirá prevenir la propagación del evento o "efecto burbuja" (que el evento vaya escalando a elementos padre).

$(".content-agents, .bar-agent-content, .bar-agent").on( ... );

Efecto burbuja

introducir la descripción de la imagen aquí


Solución

Podemos asignar el evento directamente al <span> que contiene la imagen de esta forma:

$(".content-agents, .bar-agent-content, .bar-agent").find("#delete_agent").click(function(e){
    // ...
});


Y, una vez que está asociado de esta forma, para prevenir el efecto burbuja, el evento tiene que devolver false.

$(".content-agents, .bar-agent-content, .bar-agent").find("#delete_agent").click(function(e){
    // ...

    return false;  // previene el efecto burbuja (propagación del evento).
});

Código

function _delete_agent(){
    $(".content-agents, .bar-agent-content, .bar-agent").find("#delete_agent").click(function(e){
        console.log("click en la imagen");
        // Prevenir el efecto burbuja
        return false;
    });
}


// Asociar el evento
$( document ).ready(function() {
    _delete_agent();
});

// Para mostrar texto cuando se hace click en el div
function show_detail_agent() {
    console.log('click en el div principal!');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bar-agent" onclick="show_detail_agent();">
    &lt;div empieza acá
    <p class="agent-data">---agent---</p>
    <span id="delete_agent" class="icon-delete">
        <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/se/se-logo-med.png" alt="">
    </span>
    acá termina el /div&gt;
</div>



Nota para JavaScript

Devolver false funciona con las funciones de . Si se quiere prevenir el efecto burbuja en , se debe utilizar:

event.stopPropagation();

Tu Respuesta

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

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