More than one time click function is not working without reload the page

Question

1. Click function is working properly.

2. But if we click the hand img more than one time it is not working when page is reloaded, below is the code.

   $(document).ready(function(){
       $("#container .like a img").click(function(){
           $("#container .balloons a img").addClass("anima");
           });
       });
   

3. I want more than one click will be work, please solve the problem.

4. Here is the fiddle: http://jsfiddle.net/vamsivelaga/n3no4759/

Answer 1

check this out

$("#container .like a img").on("click", function(){
    $("#container .balloons a img").addClass("anima").one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend' , function(event){   
        $(this).removeClass("anima");
    });

});

here the working solution

http://jsfiddle.net/muhaimincs/n3no4759/14/

Answer 2

The problem is that you don't remove anima class. You can use setTimeout function to do this:

$(document).ready(function(){
    $("#container .like a img").click(function(){
        $("#container .balloons a img").addClass("anima");
        setTimeout(function() {
            $("#container .balloons a img").removeClass("anima");
        }, 500)
        });
    });