When clicking on a specific child, another jQuery should be executed

Question

I developed a user interface in which you click on the map that it pops up, but there are two links inside this map that I shouldn’t pop up when I click. I know that these links are part of this map, and I put the event in the map selector.

So, I want to achieve this scenario:

When the user clicks on the map no matter where ... it should appear ... (she does it right now), but when the user clicks on these two links, he should not return ... he should show the tabs that I will handle itself ... It just needs to not return when you click on these links, because I want to fire another event to display tabs on these links.

I tried it with :not , but this did not work for me.

 var card = $('.card'); card.click(function() { if ($(this).hasClass('gravitate')) { $(this).removeClass('gravitate'); $(this).addClass('levitate'); } else { $(this).addClass('gravitate'); $(this).removeClass('levitate'); } }); 

 * { padding: 0; margin: 0; } body { padding: 30px; } .card { border: #ececec 1px solid; padding: 10px; width: 200px; margin-bottom: 10px; } .tab-pane { display: none; } .transition { transition: all 500ms } .gravitate { box-shadow: 0 0 18px 3px rgba(0, 0, 0, 0); width: 200px; transform: translate(0, 0); } .levitate { box-shadow: 0 0 18px 3px rgba(0, 0, 0, 0.3); width: 220px; transform: translate(-10px, 5px); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="card gravitate transition"> <h4>Sample Card</h4> <a href="#" class="tab" data-tab="first-name">First Name</a> | <a href="#" class="tab" data-tab="last-name">Last Name</a> <div class="tab-pane first-name">Omer</div> <div class="tab-pane last-name">Hussain</div> </div> <div class="card gravitate transition"> <h4>Sample Card</h4> <a href="#" class="tab" data-tab="first-name">First Name</a> | <a href="#" class="tab" data-tab="last-name">Last Name</a> <div class="tab-pane first-name">Usman</div> <div class="tab-pane last-name">Ali</div> </div> 

Answer 1

You can add an event handler to your links to check if the parent card has a levitate class, and if so, terminate the click event from the DOM bubbles and call another event handler:

 $('a.tab').click(function(e) { if ($(this).parent().hasClass('levitate')) { e.stopPropagation(); } }) 

 var card = $('.card'); card.click(function() { if ($(this).hasClass('gravitate')) { $(this).removeClass('gravitate'); $(this).addClass('levitate'); } else { $(this).addClass('gravitate'); $(this).removeClass('levitate'); } }); $('a.tab').click(function(e) { if ($(this).parent().hasClass('levitate')) { e.stopPropagation(); } }) 

 * { padding: 0; margin: 0; } body { padding: 30px; } .card { border: #ececec 1px solid; padding: 10px; width: 200px; margin-bottom: 10px; } .tab-pane { display: none; } .transition { transition: all 500ms } .gravitate { box-shadow: 0 0 18px 3px rgba(0, 0, 0, 0); width: 200px; transform: translate(0, 0); } .levitate { box-shadow: 0 0 18px 3px rgba(0, 0, 0, 0.3); width: 220px; transform: translate(-10px, 5px); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="card gravitate transition"> <h4>Sample Card</h4> <a href="#" class="tab" data-tab="first-name">First Name</a> | <a href="#" class="tab" data-tab="last-name">Last Name</a> <div class="tab-pane" class="first-name">Omer</div> <div class="tab-pane" class="last-name">Hussain</div> </div> <div class="card gravitate transition"> <h4>Sample Card</h4> <a href="#" class="tab" data-tab="first-name">First Name</a> | <a href="#" class="tab" data-tab="last-name">Last Name</a> <div class="tab-pane" class="first-name">Usman</div> <div class="tab-pane" class="last-name">Ali</div> </div> 

Answer 2

If I understand correctly, you want any click on the map to expand / remove it, but not if the user clicks on any of the links. If so, it is as simple as processing the hyperlink function individually and preventing the event from propagating. Just add this to your JavaScript:

 var cardTabs = $('.tab'); cardTabs.click(function() { alert("your handler"); return false; }); 

You can also use the default propagation and stop methods of the click event, which are equivalent (see event.preventDefault () vs. return false )

 var cardTabs = $('.tab'); cardTabs.click(function(e) { alert("your handler"); e.preventDefault(); e.stopPropagation(); });