Question

I have a tab…

<span id="Tab_1" class='Global_OFF'>
    <span id="Tab_Name_1">Tab Name</span>
    <span id="Delete_1" class="Tab_Delete">X</span>
</span>

I have two jquery actions that happen. One is when I click the tab itself which is class ‘Global_Off’ and the other is when I click the delete button which is class ‘Tab_Delete’. Unfortunately, when I click class ‘Tab_Delete’, it will fire class ‘Global_OFF’. Is there a way to click ‘Tab_Delete’ without firing ‘Global_OFF’ in this format?

Answer 1

Use stopPropagation() on delete button click event which will prevent the event from bubbling up to the parent span.Global_OFF.

$('.Tab_Delete').click(function(e){
     //Other stuff

     e.stopPropagation();
});