jQuery click method on nested classes

Question

Starting from the snippet:

<!DOCTYPE html>
<html>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>    
        <body>
            <ul>
                <li><a class="parentClass" href="#">Parent</a></li>
            </ul>

            <script>
                jQuery(document).ready(function($){

                    $('.parentClass').append("<span class='childClass'> || Child</span>");

                    $('.parentClass').click(function(e){    
                        alert('parent');
                    });

                    $('.childClass').click(function(e){ 
                        //$('.childClass').removeClass('parentClass');
                        alert('child');
                    });             
                }); 
            </script>
        </body>
</html>

If I click on "Parent" I can view the alert('parent') only, but if I click on "Child" I will fire not only alert('child') but also alert('parent'). I tried to insert $('.childClass').removeClass('parentClass'); but it doesn't work. I can't figure out how to avoid to launch the parent from child, without modify the nested classes inside the anchor...is it possible?

adeneo · Accepted Answer · 2016-10-01 18:35:25Z

2

Events bubble, you can stop the propagation

jQuery(document).ready(function($) {

    $('.parentClass').append("<span class='childClass'> || Child</span>");

    $('.parentClass').click(function(e) {
        alert('parent');
    });

    $('.childClass').click(function(e) {
        e.stopPropagation();
        alert('child');
    });
});

FIDDLE

or make sure the parent was actually the target

jQuery(document).ready(function($) {

    $('.parentClass').append("<span class='childClass'> || Child</span>");

    $('.parentClass').click(function(e) {
        if ( this === e.target ) {
            alert('parent');
        }
    });

    $('.childClass').click(function() {
        alert('child');
    });
});

FIDDLE

answered Oct 1, 2016 at 18:35

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user6895464 Over a year ago

Thank you, for the explanation too (events bubble),...i've learned a new thing :)

THCoder · Accepted Answer · 2016-10-01 18:36:06Z

<!DOCTYPE html>
<html>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>    
        <body>
            <ul>
                <li><a class="parentClass" href="#">Parent</a></li>
            </ul>

            <script>
                jQuery(document).ready(function($){

                    $('.parentClass').append("<span class='childClass'> || Child</span>");

                    $('.parentClass').click(function(e){    
                        alert('parent');
                    });

                    $('.childClass').click(function(e){ 
                        //$('.childClass').removeClass('parentClass');
                        alert('child');
                        e.stopPropagation();
                    });             
                }); 
            </script>
        </body>
</html>

All you need is to use .stopPropagation()

Misha Light · Accepted Answer · 2016-10-01 18:37:25Z

0

You need to use event.stopPropagation():

$('.childClass').click(function(e){ 
    e.stopPropagation();
    alert('child');
});

answered Oct 1, 2016 at 18:37

Misha Light

6,6462 gold badges33 silver badges41 bronze badges

Collectives™ on Stack Overflow

jQuery click method on nested classes

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related