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

Question

我遇到了 Jquery Cycle 插入问题。

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

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

有时，activeSlide 类不会更改元素，或者会丢失图库中的某个元素。

如果我刷新页面它就可以正常工作。

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

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

我发布代码。

有人可以帮助我吗？我花了三天时间试图找到解决方案:((((((

谢谢 Davide。

这是我的代码：

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

Answer 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();

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