CODEWITHSUNDEEP
javascriptjquery
user6895464
user6895464

Reputation:

jQuery click method on nested classes

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?

Upvotes: 0

Views: 189

Answers (3)

Misha
Misha

Reputation: 6588

You need to use event.stopPropagation():

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

Upvotes: 0

THCoder
THCoder

Reputation: 132

<!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()

Upvotes: 0

adeneo
adeneo

Reputation: 318202

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

Upvotes: 2

Related Questions