Clicking child element fires parent click event

Question

I know this question has been asked a few times, but I cannot seem to get this working. When the child gets click, I don't want the parent event firing. I have the following:

<div class="tabItem">
    <span> Item 1</span>
    <div class='contentBody'>Item 2 Body</div>
</div> 

And the following jquery:

$(document).ready(function() {

            $('.tabItem').each(function(index){                             

                $(this).attr('id', 'tabIndex'+index);               
                var contentDiv = $(this).find('div').first();
                var position = contentDiv.position();
                var right = $(window).width() - position.left - contentDiv.width() ;
                var top = (position.top - 18) ;
                var contentId = 'tabContent' + index;           

                $(contentDiv).css( "display", "none" ).css({top: top, left: 200}).attr('id', contentId);                

                $(this).on('click',  function() {               

                    $(this).removeClass('tabItem').addClass('tabItemSelected');                                         

                     $(currentTab).removeClass('tabItemSelected').addClass('tabItem');  

                    if($('#' + currentContentBody).is(":visible")){
                        $('#' + currentContentBody).toggle( "slide" ); // close the last tab
                    }
                    if($(contentDiv).is(":hidden")){
                        $(contentDiv).toggle( "slide" );    

                    }           
                     currentTab = $(this);
                     currentContentBody = $(contentDiv).attr('id');

                });             
            });

  });

The click event is for the parent with class tabItem. But when I click the child div, the parent event files. Here is a working example jsfiddle

Answer 1

Another possible solution is bind the click event to the span:

$(this).find('span').on('click', function(e) {

DEMO: https://jsfiddle.net/lmgonzalves/asqwnr8v/3/

Note: Also you need to fix some $(this) to $(this).parent() inside the click event.

Answer 2

You'll want to call event.stopPropagation() on the child's event handler. This will prevent the event from bubbling up to the parent element.

Be very careful with this, as you can quickly cut of all click-events from bubbling up to the parent if you're not careful. This is clearly not what you want.

Answer 3

just change your click handler to this:

        $(this).on('click',  function(e) {               

            $(this).removeClass('tabItem').addClass('tabItemSelected');                                         

             $(currentTab).removeClass('tabItemSelected').addClass('tabItem');  

            if($('#' + currentContentBody).is(":visible")){
                $('#' + currentContentBody).toggle( "slide" ); // close the last tab
            }
            if($(contentDiv).is(":hidden")){
                $(contentDiv).toggle( "slide" );    

            }           
             currentTab = $(this);
             currentContentBody = $(contentDiv).attr('id');

            e.stopPropagation();

        });

where the important changes are:

$(this).on('click', function(e) {

and

e.stopPropagation();