为什么我使用 jQuery 添加类后单击不起作用？答案

【问题标题】：Why is my click not working after I add a class with jQuery?为什么我使用 jQuery 添加类后单击不起作用？
【发布时间】：2018-10-10 17:16:30
【问题描述】：

我点击了一些 div。当我点击它们时，点击要么不起作用，要么立即不起作用。

我有一个旋转木马。轮播具有由 css 类确定的背景图像。轮播中也有 div 有一个类。我将一个淡入淡出类附加到内部 div 以提供交叉淡入淡出效果。这行得通。

如果我在页面加载后立即单击 div，一切正常。但是，在第一个轮播周期完成后，如果确实如此，我必须在单击之前多次单击 div。

经过大量的试验和错误，我确定“.addClass('fadein')”会导致问题。删除它会在第一次尝试时恢复我的点击次数。

这对我来说很奇怪，因为我没有将它添加到任何点击中。

这是我的代码的 sn-p。我的 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>

我的 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;
}

还有我的 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);
        }
    });
})

我想保持交叉淡入淡出，但是，在尝试解决这个问题几个小时后，我准备放弃了。我通读了其他 SO 答案，但它们似乎与我的问题不同，因为它们正在向点击处理程序添加一个类，而我没有。

如果有人能指出我正确的方向，我可以从那里开始。

谢谢。

【问题讨论】：

仅供参考：您设置 animateScreensaver = false; 并立即执行 if 语句比较该变量 if(!animateScreensaver)，该 if 语句毫无意义，因为该变量始终为 false
啊，你是对的。我正在组合点击中 - 我有两种播放视频的方式（一种来自屏幕保护程序页面，另一种在视频页面上），并且想要设置一个标志。虽然它没有解决我的问题，但我已经相应地更新了代码。

标签： javascript jquery css event-handling css-transitions

【解决方案1】：

我不确定我的解决方案能否解决您的问题。但根据我的经验，Jquery 的点击事件必须写在就绪事件中。

例子：

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

  //add your click function here

});

【讨论】：

OP 使用的 $(function(){}) 是 $(document).ready(function(){}) 的快捷方式