CODEWITHSUNDEEP
javascriptjquerycssevent-handlingcss-transitions
user1384759
user1384759

Reputation: 1

Why is my click not working after I add a class with jQuery?

I set a click on some divs. When I click on them, the click either doesn't work or doesn't work immediately.

I've a carousel. The carousel has a background image that's determined by a css class. There are also divs inside the carousel that have a class. I'm attaching a fadein class to the inside divs to give a cross-fading effect. This works.

If I click a div immediately after page load, everything works. However, after the first carousel cycle completes, I have to click a div several times before the click takes, if it does.

After a lot of trial and error, I determined that ".addClass('fadein')" causes the problem. Removing that restores my clicks on the first try.

This is strange to me because I'm not adding it to anything that's a click.

Here's a snippet of my code. My HTML:

<div id="slider-wrapper" class="videos-set-1">
    <div id="ss-video-1" class="video-selection video-display-top"></div>
    <div id="ss-video-2" class="video-selection video-display-left"></div>
    <div id="ss-video-3" class="video-selection video-display-right"></div>
</div>

My css:

#slider-wrapper.fadein.videos-set-3 .video-display-top,
#slider-wrapper.fadein.videos-set-3 .video-display-left,
#slider-wrapper.fadein.videos-set-3 .video-display-right {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 1s, opacity 1s linear;
}

And my jQuery:

var activeIndex = 0;
var play;
var carouselItems = $('#slider-wrapper .video-selection');
var panelsTotal = carouselItems.length;
var videoGallery = $('.container-videos');
var animateScreensaver = true;

$(function() {
    function animateCarousel(n) {
        if(!animateScreensaver) return;
        if((n > activeIndex && n < panelsTotal) || (n < activeIndex && n >= 0)) {
            if(carouselItems.eq(n)) {
                $('#slider-wrapper').removeClass().addClass('videos-set-' + (n+1)).addClass('fadein');
            }
        }
        setTimeout(function () {
            $('#slider-wrapper').removeClass('fadein');
        }, 3000);
        activeIndex = n;
    }

    function playScreensaver() {
        animateScreensaver = true;
        play = setInterval(function() {
            if(activeIndex >= panelsTotal-1) {
                animateCarousel(0);
            } else {
                animateCarousel(activeIndex+1);
            }
        }, animateDuration);
    }

    function showScreensaver() {
        animateScreensaver = true;
        playScreensaver();
    }

    function playVideo(video) {
        // play video stuff
    }

    var autoStart = setTimeout(function() {
        playScreensaver();
    });

    $('.video-selection').on('click', function() {
        var thisVideo = $(this).attr('id');
        if(!animateScreensaver) {
            showVideoGallery(thisVideo);
        } else {
            animateScreensaver = false;
            playVideo(thisVideo);
        }
    });
})

I'd like to keep the cross-fade, but, after a couple hours of attempting to resolve this, I'm prepared to go without. I read through other SO answers, but they seem different from my issue, as they're adding a class to a click handler, and I'm not.

If someone could point me in the right direction, I can take it from there.

Thanks.

Upvotes: 0

Views: 111

Answers (1)

Pim H
Pim H

Reputation: 223

I'm not sure that my solution can solve your problem or not. But from my experience, click event of Jquery have to write in ready event.

Example:

//this is ready event
$(document).ready(function() {

  //add your click function here

});

Upvotes: 1

Related Questions