点击事件后的$ .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的页面上拥有多个元素。