Onclick event on moving images does not work

Question

I am trying to count the numbers of clicks that click on the fox image. But it does not works. I am sure that this onclick function is works.

$(document).ready(function () {
    var i = 0;
    $(".fox").click(function(){
        $(".animal-quantity").html(i++);
    });
});

Can anyone help me with this issue. Thank you very much. Link below is my full code. https://jsfiddle.net/rbtj3ywo/1/

Answer 1

In your CSS code exists

#animals {
    pointer-events: none;
}

Note: pointer-events: none Means Disables any action.

Just delete it to solve the problem.

Answer 2

Your pointer-events: none; is not correct.

$(document).ready(function () {
		var i = 0;
		$(".fox").on('click',function(){
		   	console.log("hi");
		   	$("#quantity > span").text(i++);
		});
	});

	(function() {
        var NUMBER_OF_ANIMALS = 10;

        function init() {
            /* Get a reference to the element that will contain the animals */
            var container = document.getElementById('animals');

            /* Fill the empty container with new animals */
            try {
                for (var i = 0; i < NUMBER_OF_ANIMALS; i++) {
                    container.appendChild(createAnimal());
                }
            }
            catch(e) {
            }
        }

        function randomInteger(low, high) {
            return low + Math.floor(Math.random() * (high - low));
        }

        function randomFloat(low, high) {
            return low + Math.random() * (high - low);
        }

        function pixelValue(value) {
            return value + 'px';
        }

        function durationValue(value) {
            return value + 's';
        }

        /*
         Uses an img element to create each animal. 
         */
        function createAnimal() {
            /* Start by creating a wrapper div, and an empty img element */
            var animalDiv = document.createElement('div');
            var image = document.createElement('img');

            /* Randomly choose a animal image and assign it to the newly created element */
            image.src ='https://pngimage.net/wp-content/uploads/2018/05/cute-animals-png-4.png';
	        image.style.width = randomInteger(7, 20) + 'vw';
            image.className = 'fox';

            /* Position the animal at a random location along the screen */
            animalDiv.style.top = pixelValue(randomInteger(-100, -250));
            animalDiv.style.left = randomInteger(0, 60) + 'vw';

            /* Set the -webkit-animation-name property with these values */
            animalDiv.style.webkitAnimationName ='fade, drop';
            animalDiv.style.animationName ='fade, drop';

            var fadeAndDropDuration = durationValue(randomFloat(1.2, 8.2));
            animalDiv.style.webkitAnimationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration;
            animalDiv.style.animationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration;

            var animalDelay = durationValue(randomFloat(0, 1));
            animalDiv.style.webkitAnimationDelay = animalDelay + ', ' + animalDelay;
            animalDiv.style.animationDelay = animalDelay + ', ' + animalDelay;
            animalDiv.appendChild(image);
            return animalDiv;
        }
        init();
    }
)();

.fox {
  z-index: 100;
}

#animals {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            z-index: 98;
        }
        #animals > div {
            position: relative;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: normal, normal;
            -webkit-animation-timing-function: linear, ease-in;
            -webkit-backface-visibility: hidden;
            animation-iteration-count: infinite;
            animation-direction: normal, normal;
            animation-timing-function: linear, ease-in;
            backface-visibility: hidden;
        }
        #animals > div > img {
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
            -webkit-animation-timing-function: linear;
            -webkit-backface-visibility: hidden;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-timing-function: linear;
        }
        @-webkit-keyframes fade {
            0%, 90% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
        @keyframes fade {
            0%, 90% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
        @-webkit-keyframes drop {
            0% {
                -webkit-transform: translate3d(0, 0, 0);
            }
            100% {
                -webkit-transform: translate3d(0, 1100px, 0);
            }
        }
        @keyframes drop {
            0% {
                transform: translate3d(0, 0, 0);
            }
            100% {
                transform: translate3d(0, 1100px, 0);
            }
        }
        .quantity{
            position: absolute;
            left: 0;
            right: 0;
            text-align: center;
            top: 100px;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="animals"></div>
        <img src="https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/pf-misctexture01-beer-000_5.jpg?w=800&dpr=1&fit=default&crop=default&q=65&vib=3&con=3&usm=15&bg=F4F4F3&ixlib=js-2.2.1&s=c1552a7bdc2ea7b6e17d8d0d893c15be" class="background" style="width: 100%; position: relative;">
		<div class="quantity" id="quantity">Total quantity: <span class="animal-quantity">0</span></div>