Using jQuery, or JavaScript, to make an image active during an on click?

Question

I've found a function to make a button work correctly using jQuery to change the selector to active. I am however having issues having an image with an overlay go into an active state with a click.

For the HTML I have:

<div class="img-container1 image-container" image-var="image1.jpg">
      <%= image_tag('image1.jpg') %>
      <div class="wk-after">
        <div class="centered-wk">
          <span class="fa fa-check-circle check-circle"></span>
        </div>
        <div class="centered-wk wk-select">
          SELECTED
        </div>
      </div>
    </div>

In CSS I have:

.img-container1{
 margin-right: 10px;
 margin-bottom: 10px;
 position: relative;
}
.image-container:hover .wk-after, .image-container.active .wk-after{
display: block;
background: rgba(231, 68, 129, 0.75);
}

.wk-after{
 display: flex;
 justify-content: center;
 align-items: center;
}

.image-container.active .wk-after {
display: block;
background: rgba(231, 68, 129, 0.75);
}

.image-container .wk-after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-size: 16px;
display: none;
color: #FFF;}

.centered-wk {
display: flex;
align-items: center;
justify-content: center;
align-self: center;
align-items: center;}

I've attempted to use the following jQuery to grab the class and make the change:

$('.img-container1').click(function(){
      console.log('test');
      $('.image-container').removeClass('active');
      $(this).parents('.image-container').addClass('active');
      console.log($(this).closest('.image-container'));
        });

But it doesn't work. I put in the console log to see if it's actually hitting the container and nothing. If I change it to say a button I have on the page the log appears. If I manually type into the console in the webpage it actually appears.

Should I be using JavaScript instead? What would be the best way to get by a class name add an on click and apply active class?

EDIT : this code works when I type it directly into the web browser console:

var $link = $('.img-container1');
    $link.click(function(){
      $link.removeClass('active');
      console.log("testing");
      $(this).addClass('active');

So the bigger question is how can I get this actually work when I load the page?

Answer 1

If your code works in console, probably you add event listeners before dom fully loaded. Try ready() function or add your script in bottom of page.

$(document).ready(function() {
      $('.img-container').click(function(){   
            $(this).toggleClass('active');
          });    
    });

toggleClass

jsfiddle example

Answer 2

How about this?

  $('.img-container1').click(function(){
    var isActive = $(this).hasClass('active');

    $('.img-container1').removeClass('active');

    if(isActive == false){

      $(this).addClass('active');
    }
  });

Answer 3

So here was the actual solution:

var $link = $('.img-container1');
$('.img-group').on("click", '.img-container1', function(){
$link.removeClass('active');
$(this).addClass('active');
});

Apparently I needed to bind the img-container1 to the parent class and it worked.