Почему мой клик не работает после добавления класса с помощью jQuery? - PullRequest
Новая
       10

Почему мой клик не работает после добавления класса с помощью jQuery?

0 голосов
/ 10 октября 2018

Я установил клик по некоторым элементам.Когда я нажимаю на них, щелчок либо не работает, либо не работает сразу.

У меня есть карусель.Карусель имеет фоновое изображение, которое определяется классом CSS.Внутри карусели также есть div, у которых есть класс.Я присоединяю класс fadein к внутренним элементам div, чтобы создать эффект затухания.Это работает.

Если я нажимаю div сразу после загрузки страницы, все работает.Однако после завершения первого цикла карусели мне нужно несколько раз щелкнуть по элементу div, прежде чем будет выполнен клик.

После долгих проб и ошибок я определил, что ".addClass ('fadein')) "вызывает проблему.Удаление этого восстанавливает мои клики с первой попытки.

Это странно для меня, потому что я не добавляю это ни к чему, что является кликом.

Вот фрагмент моего кода.Мой 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, но они, кажется, отличаются от моей проблемы, поскольку они добавляют класс в обработчик кликов, а я нет.

Если кто-то может указать мне правильное направление, ямогу взять его оттуда.

Спасибо.

1 Ответ

0 голосов
/ 10 октября 2018

Я не уверен, что мое решение может решить вашу проблему или нет.Но из моего опыта клик по событию Jquery нужно записать в готовое событие.

Пример: 

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

  //add your click function here

});
...