Question

Im making a simple proof of concept page with jQuery:

    $('.notclicked').click(function() {
    $(this).addClass("clicked");
    $(this).removeClass("notclicked");
      $('.maps-cont').animate({
        left: '0'
      }, 500, function() {
        // Animation complete.
      });
    });

    $('.clicked').click(function() {
    $(this).addClass("notclicked");
    $(this).removeClass("clicked");
      $('.maps-cont').animate({
        left: '-320px'
      }, 500, function() {
        // Animation complete.
      });
    });

The idea is that clicking on div.notclicked does the first part of the animation and then changes the class to div.clicked, then as the class has changed the second part of the annimation can be triggered with the second bit of code. However for some reason the second part of the code doesnt work, the new class is not assigned and the animation doesn’t run.

This is just a proof of concept so I know that clicking while the animation is in progress may cause issues. Rather than have my code completely rewritten to something that might be better but I wont understand, id much rather have this code fixed if ive made a simple error with it. Thanks

Answer 1

Try using .on to attach your click event instead, since, future elements with the specified class will not have event handlers attached. .on binds event handlers now and in the future.

In the code below you could replace document with the parent element that the element is contained within. I just used the document as an example.

$(document).on('click','.clicked', function() {    
  $(this).removeClass("clicked").addClass('notclicked');
});

$(document).on('click', '.notclicked' ,function() {       
  $(this).removeClass("notclicked").addClass('clicked'); 
});

Here’s a fiddle.