为什么使用 jQuery 添加类后我的点击不起作用?

Question

我设置了一些div的点击。当我单击它们时，单击要么不起作用，要么不能立即工作。

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

如果我在页面加载后立即单击div，一切正常。但是，在第一个轮播周期完成后，我必须多次单击一个div，然后才能单击(如果有的话(。

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

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

这是我的代码片段。我的网页：

<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 答案，但它们似乎与我的问题不同，因为它们正在向单击处理程序添加一个类，而我不是。

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

谢谢。

Answer 1

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

例：

//this is ready event
$(document).ready(function() {
//add your click function here
});