Jquery Cycle 插件 - Ajax 图像加载的大问题答案

【问题标题】：Jquery Cycle plugin - Great problem with Ajax images loadingJquery Cycle 插件 - Ajax 图像加载的大问题
【发布时间】：2011-02-08 16:12:55
【问题描述】：

Jquery Cycle 插件有问题。

我通过 Ajax 动态加载画廊的图像。

当我单击图库的下一个或上一个按钮时，序列无法正常工作。

有时 activeSlide 类不会更改元素或缺少图库的元素。

如果我刷新页面，它会正常工作。

当我调用 ajax 并更改图库中的图像时，我会在重新声明之前和之后销毁插件。

如果我为自动滑动设置了超时，则一切正常。

我发布代码。

有人可以帮助我吗？这是我尝试找到解决方案的3天：（（（（（（

谢谢大卫。

这是我的代码：

success: function(data){

    $('#imgcaption').cycle('destroy');//Before load data I destroy the gallery

    $('#dettaglio #imgcaption').empty();//I clean the div's
    $('#dettaglio #nav').empty();

            //I insert the new Images
            $.each(data.foto, function(index, value){
            $('#imgcaption').append('<div><img src="' + value + '" alt="" /></div>');           
    });

            //I redeclare the Cycle 
    $('#imgcaption').cycle({
        timeout: 0,
        fx: 'scrollHorz',
        speed: 500,
        pager: '#nav',
        pagerAnchorBuilder: function(idx, slide) { 
            return '<a href="#"></a>'; 
            }
    });

【问题讨论】：

标签： ajax plugins load cycle

【解决方案1】：

我遇到了同样的问题。显然 jQuery Cycle 在 ajax 加载后仍然会看到旧的 DOM 元素。因此，当您将 .cycle() 应用于新的 AJAX DOM 时，jQuery Cycle 会将其绑定到来自 AJAX 的新 DOM 和“删除”的旧 DOM。

这就是为什么你的分页搞砸了（更具体地说，第一组页面链接指的是旧 DOM，后面一组指的是新的 AJAX DOM）。

因此，解决方法是在执行 .cycle('destroy') 后手动删除与循环关联的 DOM 元素

$(".cycleSelector").remove();
$(".pagerSelector").remove();

或者在你的情况下：

$("#imgcaption").remove();
$("#nav").remove();

希望对您有所帮助！网上有很多关于这个问题的帖子，没有提出解决方案。现在我们有一个。 :)

【讨论】：