On clicking on a specific child a different jQuery should run

Question

I developed a UI where you will click a card it will pop up but inside that card there are two links on which when I click it should not pop back. I know that those links are part of that card and I put an event on the card selector.

So I want to achieve this scenario:

When user clicks on a card no matter where ... it should pops up.. (Its doing it right now) but when user clicks on those two links it should not pop back ... it should show tabs which I will handle myself ... Just need a way that it should not pop back on clicking on those links because I want to fire another event to display tabs on those links.

I tried it with :not but it didn't 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>

On a side-note, you might want to look at [`.toggleClass()`](http://api.jquery.com/toggleclass/). — dokgu, Feb 13 '18 at 15:33

j08691 · Accepted Answer · 2018-02-13T15:23:54.327

You can add an event handler to your links to check if the parent card has the levitate class and if so, stop the click event from bubbling up the DOM and triggering your other 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>

Amazing ... this is what I need :D .... Thanks for the knowledge @j08691 .... can you explain a little about `e.stopPropagation();` whats it doing? — Omer, Feb 13 '18 at 15:18
Sure. `stopPropagation()` simply stops an event from continuing to propagate up the DOM hierarchy and triggering any other event handlers on ancestor elements. Can you read a more in-depth explanation at https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation and https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples#Example_5:_Event_Propagation — j08691, Feb 13 '18 at 15:22
lol in my last comment it should read as "You can..." not "Can you..." — j08691, Feb 13 '18 at 17:52

score 1 · Answer 2 · answered Feb 13 '18 at 15:27

If I understand it right, you want that any click on the card expands/retracts it, but not if the user clicks any of the links. If so, it's as simple as handling the hyperlinks click function separately and preventing the event to propagate. Just add this to your JavaScript:

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

You can also use prevent default and stop propagation 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();
});

On clicking on a specific child a different jQuery should run

2 Answers2