$.cycle 和点击事件后的动态内容

Question

我想将循环应用于具有动态内容的 div 块。该内容将在点击事件后生成。一旦我单击图像，它就可以工作，之后就无法工作。

代码：

$("div.cls img").click(function() {

  ....  Adding the content


 $('#myDiv').cycle({
            fx: 'scrollHorz',
            speed: 3500,
            timeout: 0, continuous: true,
            pause: 1, sync: 1
        }); 
}); 

HTML：

<div id="myDiv">
 <div>
 <a id="i1"> abc</a>
 <a id="i2"> abcd</a>
 <a id="i3"> abce</a>
   <a id="i4"> abcf</a>
 <a id="i5"> abcg</a>
 <a id="i6"> abch</a>
</div>
 <div>
 <a id="i11"> abc1</a>
 <a id="i21"> abcd1</a>
 <a id="i31"> abce1</a>
   <a id="i41"> abc1f</a>
 <a id="i51"> abcg1</a>
 <a id="i61"> abch1</a>
</div>
</div>

Answer 1

编辑：

添加动态内容后尝试再次调用$.cycle()。另外，使用 Firebug 确保您的内容正确生成。

如果这不起作用，那么看起来您将不得不修改循环插件以支持动态添加“幻灯片”，或者编写您自己的解决方案。

---

来自 http://www.malsup.com/jquery/cycle/：

工作原理

该插件提供了一个名为
在容器上调用的循环
元素。的每个子元素
容器变成了“幻灯片”。选项
控制幻灯片的播放方式和时间
已转换。

因此，您可以保留 Javascript，但 HTML 应该如下所示：

<div id="myDiv">
  <div>
    <a id="i1"> abc</a>
    <a id="i2"> abcd</a>
    <a id="i3"> abce</a>
    <a id="i4"> abcf</a>
    <a id="i5"> abcg</a>
    <a id="i6"> abch</a>
  </div>
  <div>
    <a id="i11"> abc1</a>
    <a id="i21"> abcd1</a>
    <a id="i31"> abce1</a>
    <a id="i41"> abc1f</a>
    <a id="i51"> abcg1</a>
    <a id="i61"> abch1</a>
  </div>
</div>

另外，一页上不应该有多个具有相同 ID 的元素。