jQuery .clone setInterval

jQuery .clone setInterval

本文关键字:setInterval clone jQuery      更新时间:2023-09-26

我有一个包含文本/图像的div和一个用于这些图像的自定义jQuery插件。基本上,插件所做的只是使用 setInterval 每 3 秒对淡入/淡出效果进行动画处理。这个div 就像"缓存"div。当用户请求查看此div 时,它会使用 .clone() 将其加载到查看器div 中。但是,它不会复制计时事件,它只是复制库的当前状态。

我知道为什么会发生这种情况:因为我编写的插件仅适用于缓存div 中的图库,当我克隆它时,它无法复制插件。

库代码片段如下所示:

var animateCb = function() {
    if($next_image.length == 0)
        $next_image = $images.filter(":first");
    $curr_image.fadeOut(settings.speed);
    $next_image.fadeIn(settings.speed);
    $curr_image = $next_image;
    $next_image = $curr_image.next();
}
setInterval(animateCb, settings.time);

然后有一个这样的div:

<div class='cache' id='cache-1'>
    <div class='gallery' id='gallery-1'>
            <div class='gallery-item' id='gallery-item-1'><img src='img1.jpg' /></div>         
            <div class='gallery-item' id='gallery-item-2'><img src='img2.jpg' /></div>
    </div>
</div>

我使用

$(".gallery").gallery();

当我想将缓存div 复制到我使用的查看div 时

$("#viewing-div").empty();
$("#cache-1").clone(true).appendTo("#viewing-div");

有人有办法解决这个问题吗?我不想在用户请求查看缓存时加载图库插件,它需要已经加载。

使用$.clone(true)这将保留事件。

http://api.jquery.com/clone/