jQuery循环插件（零元素？）

Question

我使用了AJAX来填充一个div，然后使用cycle插件！这是页面，下面是调用cycle的代码：

<script type="text/javascript">
    $(function() {
        $("#photoviewer").load("photo-list.shtml #ani");
        alert ('photo loaded!');
        $(document).ready(function() {
            $('#ani').cycle({ fx:      'turnDown',
                              speed:   'fast',
                              timeout: 0,
                              pager:   '#nav' });
            alert('done!');     
        });
    });
</script> 

我遇到了这个错误：[cycle] terminating; zero elements found by selector，但是在firebug中，我可以看到图片列表在应该的位置...

所以我很无助，欢迎任何帮助！

***请注意，错误控制台（警告部分）正在疯狂输出！

- menardmam

Answer 1

不要在 $(document).ready() 中初始化循环，而是在 load 回调函数中完成，这样只有当你的 ajax 调用完成并构建了 #ani div 后才执行：

    $(function() {
        $("#photoviewer").load("photo-list.shtml #ani", function() {
            $('#ani').cycle({ fx:      'turnDown',
                              speed:   'fast',
                              timeout: 0,
                              pager:   '#nav' });
        });
    });

目前情况是，cycle插件的初始化在图片加载完成之前执行（在load函数完成之前）。

- Jeff Sternal

Answer 2

这个错误意味着似乎没有名为“＃ani”的选择器可用。看起来“＃ani”是“＃photoviewer”的子节点，当ajax请求完成后，它才会添加“＃ani”。

当您调用以下方法之后：

 $("#photoviewer").load("photo-list.shtml #ani"); 

试试这个：

var interval = setInterval(function(){ 
  if(jQuery("#ani").length > 0) {
    clearInterval(interval); 
    jQuery('#ani').cycle({fx:'turnDown', speed:  'fast', timeout: 0, pager:  '#nav'}); 
  }
}, 1);                          

- fernyb

---

关于这个的一个坏处是，你必须确保 #ani 可用，否则上面的代码将会一直循环。 - fernyb