CSS在Ajax调用后不适用于幻灯片

Question

我正在尝试到达页面底部时动态加载数据（使用onScroll事件处理程序）。 我要加载的数据主要是幻灯片，以及在它们后面的幻灯片（每个幻灯片在不同的div内），以及带有嵌入式vimeo的iframe。

问题是，当我第一次访问该页面时，幻灯片显示在正确的位置。 图像堆叠在一起，在悬停幻灯片上按预期方式暂停和恢复，后面的iframe也是如此。 但是，当我点击页面底部时，会显示新的幻灯片，但该幻灯片将无法正常工作。 图像未堆叠。 看起来他们失去了CSS。 它们没有出现在正确的位置。

我发现一些相关的代码。

这是幻灯片的CSS：

<!-- language: lang-css -->
.slides{
    z-index:10;
}
.slides.active{
    visibility:visible;
}
.imagen {
    position:relative;
    height:393px;
    width:700px;
    margin-left:10px;
    z-index:1;
}

这是幻灯片的JavaScript：

     <!-- language: lang-js-->

    $('.slides').cycle({
        fx: 'fade',
         speed:   1500,
        timeout: 70,
    }).cycle('pause');


    $('.imagen').hover(function(){
            $(this).find('.slides').addClass('active').cycle('resume');
        }, function(){
         $(this).find('.slides').removeClass('active').cycle('pause');
        });

这是用于在onScroll事件处理程序上加载更多内容的JavaScript：

      <!-- language: lang-js-->
     var loaded=false;
        $(window).scroll(function(){  
var WindowHeight = $(window).height(); 
            if($(window).scrollTop() +1 >= $(document).height() - WindowHeight){ 

                if ( !loaded ) {
                $("#loader").html("<img src='recursos/imagenes/loading_icon.gif' alt='loading'/>"); 
                var LastDiv = $(".videobox:last"); 
                var LastId  = $(".videobox:last").attr("id");
                var ValueToPass = "lastid="+LastId; /* create a variable that containing the url parameters which want to post to getdata.php file */loaded=true;}
                $.ajax({ 
                type: "POST",
                url: "data.php",
                data: ValueToPass,
                cache: false,
                    success: function(html){
                        $("#loader").html("");
                        LastDiv.after(html); 
                        loaded=false;}
                });
            }
        });

我将尽可能地将所有批评家/反馈放在此代码上，即使这意味着要重新开始。

如果需要，我可以发布html或图像，或对什么应该是正确的行为提供更多说明。

Answer 1

我想你叫这条线

// Cycle plugin
$('.slides').cycle({
    fx: 'fade',
    speed:   1500,
    timeout: 70,
}).cycle('pause');

仅在页面加载一次之后。 因此，该插件仅适用于一开始就存在的元素。 您还应该激活通过ajax加载的新幻灯片的插件：

$.ajax({ /* post the values using AJAX */
    type: "POST",
    url: "data.php",
    data: ValueToPass,
    cache: false,
    success: function(html){
        $("#loader").html("");
        LastDiv.after(html); /* get the out put of the getdata.php file and append it after the last div using after(), for each scroll this function will execute and display the results */
        loaded=false;
        // Assign cycle plugin again for the new elements.
        $('.slides').cycle({
            fx: 'fade',
            speed:   1500,
            timeout: 70,
        }).cycle('pause');
    }
});

此代码还使新加载的内容可滑动。