appendTo(）&prependTo(）在IE8中不起作用

appendTo() & prependTo() not working in IE8

本文关键字：IE8 不起作用 amp appendTo prependTo 更新时间：2023-09-26

我正在使用基本滑块（RoyalSlider）运行一些测试，通过使用滑块事件函数在加载时准备/附加一些滑块内容。

我只对IE8有问题，功能根本不起作用！我读过IE8和appendTo（）/prependTo（）的一些问题，然而，出现这些问题的条件与我的不相似。

jQuery

(function($) {
    $(document).ready(function() {
        var homeSlider = $('#js-slider');
        if (homeSlider.length) {
            var slider = homeSlider.royalSlider({
                imageScaleMode: 'fill',
                controlNavigation: 'tabs',
                thumbs: {
                    fitInViewport: false,
                    autoCenter: false
                },
                arrowsNavAutoHide: false,
                slidesSpacing: 0,
                loop: true,
                transitionSpeed: 250,
                navigateByClick: true,
                sliderTouch: true,
                keyboardNavEnabled: true,
                addActiveClass: true,
                autoPlay: {
                    enabled: true,
                    pauseOnHover: false,
                    delay: 6000
                },
                block: {
                    moveOffset: 200,
                    speed: 600,
                    moveEffect: 'bottom',
                    delay: 600
                }
            }).data("royalSlider");
            slider.ev.on('rsAfterContentSet', function(e, slideObject) {
                homeSlider.find('.rsNav').prependTo( $('#js-slider') );
            });
            slider.ev.on('rsAfterContentSet', function(e, slideObject) {
                homeSlider.find('.rsABlock').appendTo( $('#js-homeSliderElements') );
            });
        }
    });
})( jQuery );

HTML

<div class="container container--home">
    <div class="container slider-slideTitleWrapper" id="js-homeSliderElements"></div>
    <div class="royalSlider slider slider--home rsMinW" id="js-slider">
...
    </div>
</div>

尝试使用原生JS方法

slider.ev.on('rsAfterContentSet', function(e, slideObject) {
     var parent = homeSlider.find('.rsNav');
     parent.insertBefore($('#js-slider'), parent.firstChild);
});
slider.ev.on('rsAfterContentSet', function(e, slideObject) {
     homeSlider.find('.rsABlock').appendChild($('#js-homeSliderElements'));
});

稍微改变了一下，找到了一种工作方法：

        var ready = false;
        var readyHandler = function() {
            homeSlider.find('.rsABlock').appendTo( $('#js-homeSliderElements') );
        };
        slider.ev.on('rsAfterSlideChange', readyHandler);
        slider.ev.on('rsAfterContentSet', function(e, slideObject) {
            if (!ready) {
                readyHandler();
                ready = true;
            }
        });