jQuery: doesn't recognize mouse click [duplicate]

Question

It really simple, but for some reason the second segment doesn't work at all. Clicking a card doesn't do ANYTHING.

$('.container__card').hover(function(){ 
    $(this).toggleClass('container__card container__card--hover')
});

$('.container__card--hover').click(function(){
   $(this).toggleClass('container__card--selected container__card--hover');
});

Answer 1

As you are adding classes dynamically so use jQuery event delegation

$(document).on('click' , '.container__card--hover', function(){
   $(this).toggleClass('container__card--selected container__card--hover');
});

Working snippet:-

$('.container__card').hover(function(){ 
   $(this).toggleClass('container__card container__card--hover')
});

$(document).on('click' , '.container__card--hover', function(){
   $(this).toggleClass('container__card--selected container__card--hover');
});

.container__card--hover{
  color:green;
  font-size:20px;
}
.container__card--selected{
  color:red;
  font-size:30px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container__card">First hover and then click me please!</div>