将一个元素附加到由第三方插件动态生成的另一个元素

Question

我有一个通过Javascript加载幻灯片的滑块。我需要通过jQuery在这些幻灯片的顶部添加一个DIV元素( ID为"home_slider_overlay")。

问题是，大约50%的时间，我添加元素的代码是在滑块插件生成幻灯片之前执行的。

我试着使用图片加载的jQuery插件，但由于某种原因，它似乎没有帮助。

这是滑块的标记：

<div class="ls-wp-fullwidth-container" style="height: 500px;">
    <div class="ls-wp-fullwidth-helper" style="height: 500px; width: 1903px; left: -491.5px;">
        <div style="margin: 0px auto; visibility: visible; height: 500px; width: 1903px;" class="ls-wp-container ls-container ls-lightskin" id="layerslider_1">
            <div class="ls-webkit-hack"></div>
            <div class="ls-inner" style="background-image: url(&quot;http://my_site.com/wp/wp-content/uploads/2014/04/slider-bg.jpg&quot;); width: 1903px; height: 500px;">
                <div style="left: auto; right: 0px; top: 0px; bottom: auto; width: 1903px; height: 500px; display: none; visibility: visible;" class="ls-layer ls-animating">
                    Slide content
                </div>
                <div id="home_slider_overlay"></div>
                </div>
            </div>
        </div>
    </div>
</div>

这是我添加额外元素的jQuery代码：

imagesLoaded( '.ls-layer', function() {     

        jQuery('#layerslider_1 .ls-inner').append('<div id="home_slider_overlay"></div>');      

    }); 

Answer 1

如果您知道必须添加的幻灯片的数量，您可以每隔50ms左右检查一次滑块是否渲染了所有内容，然后运行jquery。

var interval = window.setInterval(function() {
    if($(".slide_class").length == amount_of_slides){
        $('#layerslider_1 .ls-inner').append('<div id="home_slider_overlay"></div>');
        clearInterval(interval);
    }
}, 50);