$.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 的页面上，您永远不应该有多个元素。