CODEWITHSUNDEEP
jqueryclick
PhillyNJ
PhillyNJ

Reputation: 3903

Clicking child element fires parent click event

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

Upvotes: 2

Views: 3067

Answers (3)

erikrunia
erikrunia

Reputation: 2383

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

Upvotes: 0

lmgonzalves
lmgonzalves

Reputation: 6588

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.

Upvotes: 2

Sampson
Sampson

Reputation: 268324

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.

Upvotes: 6

Related Questions