Home / Questions / 20529
Accepted
Oscar E. Alvarado
Asked: 2020-08-15 13:22:58 +0800 CST 2020-08-15 13:22:58 +0800 CST

Click event inside a tag that has another click event?

  • 772

I am creating a label in the form of a bar that contains icons, this label has an clickassociated event that, when activated, shows me a detail. Now, the problem arises when I want to give an event clickto the icon, which are contained within the mentioned tag and its event is not activated, but the event of the parent tag is activated.

I want to avoid moving the icon outside of the label and would like to know if there is a way to make its event fire by skipping the event of the containing label.

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>

What I'm trying to do is access the event clickof the span with id="delete_agent"so that it removes this tag. But since it is contained within the with tag, class="bar-agent"it does not allow me to access the span.

function _delete_agent(){
    $(".content-agents .bar-agent-content .bar-agent").on("click","#delete_agent", function(){
        console.log("aqui!");
    });
}
javascript

1 Answers

  1. Best Answer

    Problem

    selector for many classes, they should be separated by commas. For example, to select all elements of class content-agents AND all of bar-agent-content AND all of bar-agent:

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

    However, when selecting in this way, the event is associated with the divmain one, something that will not allow us to prevent the propagation of the event or " bubble effect " (that the event escalates to parent elements).

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

    bubble effect

    enter image description here

    Solution

    We can assign the event directly to the <span>one that contains the image like this:

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


    And, once it's bound in this way, to prevent bubble effect, the event has to returnfalse .

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

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

    Code

    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>


    Note to JavaScript

    Return falseworks with functions . If you want to prevent the bubble effect in , you should use:

    event.stopPropagation();
    • 2