CODEWITHSUNDEEP
jquery
Evanss
Evanss

Reputation: 23593

jQuery add and remove class - 2nd half of animation doesn't work

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

Upvotes: 0

Views: 162

Answers (4)

aziz punjani
aziz punjani

Reputation: 25776

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.

Upvotes: 1

ShankarSangoli
ShankarSangoli

Reputation: 69915

You can manage it with just one handler.

//Assuming the default class on the element is notclicked
$('.notclicked').click(function() {
      var $this = $(this);
      $('.maps-cont').animate({
         left: $this.hasClass('notclicked') ? '0' : '-320px'
      }, 500, function() {
        // Animation complete.
      });
      $this.addClass("clicked").removeClass("notclicked");
});

$('.clicked').click(function(){....}) is not working because on page load $('.clicked') gives empty set so jQuery cannot attach the event handler on it.

Upvotes: 0

Evanss
Evanss

Reputation: 23593

Kind of goes against my desire not to rewite my code but looking at the on method really confused me so Ive managed it with this:

    $('.filters').toggle(
       function()
       {
          $('.maps-cont').animate({
          left: "0"
    }, 500);
       },
       function()
       {
          $('.maps-cont').animate({
          left: "-320"
          }, 500);
    });

Upvotes: 0

Rich O'Kelly
Rich O'Kelly

Reputation: 41767

The click event handler is bound to DOM entities that match the selector when the click method is called. Try the on method instead:

$('#idOfParentElement').on('click', '.clicked', function(e) { ... });

Upvotes: 0

Related Questions