Don't give active class when clicking the button-CodePudding

So I have a page with a bunch or options listed in a card style view. Each card has a button at the bottom that will open a popup modal with more info about the service.

Now this page is also being used as a sort of build your own adventure, so when a visitor clicks the card it will get the active class and the active appearance along with that.

When a visitor clicks the read more modal button I don't want the active class to be assigned to the card.

$(".service-option-card").click(function() {
  $(this).addClass("active").siblings('.active').removeClass('active');
});

.service-option-container {
  margin: 1em 0 4em 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1em;
  row-gap: 1em;
}

.service-option-container .service-option-card {
  border: 1px solid black;
  border-radius: 20px;
  padding: 1em;
  margin-left: 1em;
  margin-right: 1em;
}

.service-option-container .service-option-card .service-option-btn {
  margin: 1em 0;
}

.service-option-container .service-option-card .extra-pad-bottom {
  padding-bottom: 2em;
}

.service-option-container .service-option-card .option-price {
  font-weight: bold;
}

.service-option-container .service-option-card:hover {
  cursor: pointer;
}

.service-option-container .service-option-card.active {
  background-color: #efeeee;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div >
  <div >Card Content goes in here <br><a >Button</a></div>
  <div >Card Content goes in here <br><a >Button</a></div>
  <div >Card Content goes in here <br><a >Button</a></div>
  <div >Card Content goes in here <br><a >Button</a></div>
  <div >Card Content goes in here <br><a >Button</a></div>
  <div >Card Content goes in here <br><a >Button</a></div>
  <div >Card Content goes in here <br><a >Button</a></div>
</div>

EDIT:

Solution found that worked for me, I have left it below as an answer.

CodePudding user response：

If I get your question correctly, you wanted the card to be not active when user clicks on "Button"

To achieve this, you can stop the propagation of event to .service-option-card which triggered the addition of active class

$(".service-option-card").click(function() {
  $(this).addClass("active").siblings('.active').removeClass('active');
});

$(".service-option-btn").click(function(e) {
  e.stopPropagation();
});

.service-option-container {
  margin: 1em 0 4em 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1em;
  row-gap: 1em;
}

.service-option-container .service-option-card {
  border: 1px solid black;
  border-radius: 20px;
  padding: 1em;
  margin-left: 1em;
  margin-right: 1em;
}

.service-option-container .service-option-card .service-option-btn {
  margin: 1em 0;
}

.service-option-container .service-option-card .extra-pad-bottom {
  padding-bottom: 2em;
}

.service-option-container .service-option-card .option-price {
  font-weight: bold;
}

.service-option-container .service-option-card:hover {
  cursor: pointer;
}

.service-option-container .service-option-card.active {
  background-color: #efeeee;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div >
  <div >Card Content goes in here <br><a >Button</a></div>
  <div >Card Content goes in here <br><a >Button</a></div>
  <div >Card Content goes in here <br><a >Button</a></div>
  <div >Card Content goes in here <br><a >Button</a></div>
  <div >Card Content goes in here <br><a >Button</a></div>
  <div >Card Content goes in here <br><a >Button</a></div>
  <div >Card Content goes in here <br><a >Button</a></div>
</div>

CodePudding user response：

Solution I found, adding this if statement and returning true will end the function and prevent it from getting to the line that adds the active class to the card.

$( ".service-option-card" ).click(function(e) {

    if($(e.target).is("a")){
        return true;
    }

    $( this ).addClass("active").siblings('.active').removeClass('active');

});