Question

当我在滑块内克隆幻灯片时，我有一个视频滑块，简而言之，它没有正确播放视频（以及执行其他功能）。我已将.clone（）设置为true，但这只对实际播放视频有帮助，但不会影响我的播放功能中的其他事件。

我的jQuery看起来像：

var gallery = $('.slide-gallery');
            var rightButton = $('.video-slider .right a');
            var leftButton = $('.video-slider .left a');
            var slide = $('.slide-gallery .slide');
            var itemWidth = slide.outerWidth();
            var playButton = $('.play-button');
            var sliderVideo = $('.slider-video');
            var sliderOverlay = $('.video-slider .overlay-content');
            var rightIndent = parseInt(gallery.css('left'));
            var left = gallery.css("left");
            var item_width = slide.outerWidth(); 
            var left_indent = parseInt(gallery.css('left')) - item_width;
            var right_indent = parseInt(gallery.css('left'));
            var leftTwo = parseInt(left) * 2;

            // When clicking right arrow
            rightButton.click(function(){
                // call function below
                stopCurrentVideo();
                $('.slide-gallery .slide').eq(0).clone(true, true).appendTo(gallery);  
                gallery.animate({
                    'left' : left_indent
                },{
                    queue:false, 
                    duration:500, 
                    complete: function(){
                    $('.slide-gallery .slide').eq(0).remove(); 
                    gallery.css("left", left); 
                    } 
                });
            });

            // When clicking left arrow
            leftButton.click(function(){
                // call function below
                stopCurrentVideo();
                $('.slide-gallery .slide').eq(2).clone(true, true).prependTo(gallery); 
                gallery.css("left", leftTwo);
                gallery.animate({
                    'left' : right_indent
                },{
                    queue:false, 
                    duration:500, 
                    complete: function(){
                    $('.slide-gallery .slide').eq(3).remove(); 
                    gallery.css("left", left); 
                    } 
                });
            });

            function stopCurrentVideo(){
                // return playing video to loaded state, remove controls, and fade in overlay-content
                sliderVideo.load().removeAttr('controls');
                // bring the play button back
                playButton.fadeIn();
                // if window is greather than 1024 px;
                if ($(window).width() > 1024 ){
                    // bring back the overlay content
                    sliderVideo.siblings(sliderOverlay).fadeIn();
                }
            }

            // Video play functionality

            // when clicking play button
            playButton.on('click', function() {
                // hide play button
                $(this).hide();
                // hide overlay content
                sliderOverlay.fadeOut();
                // play the video
                $(this).parent().siblings(sliderVideo)[0].play();
            });

            sliderVideo.on('play', function() {
                // add controls to video that is playing
                $(this).attr('controls', '1');
            })
        }

正如您所看到的，我正在克隆第一张或最后一张幻灯片并将其移到前面或后面以使滑块成为旋转木马。我在每个幻灯片转换中调用一个函数来停止当前视频并将叠加元素返回到幻灯片。 playButton＆＃39; click＆＃39;中的所有事件。当我将克隆设置为.clone时，函数开始工作（true，true）。但是，stopCurrentVideo函数中的事件仍然无法用于克隆的幻灯片。任何人有任何指针？

事件不适用于克隆元素

0 个答案: