php - Ajax 调用后 CSS 不适用于幻灯片

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');
    }
});

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