$.cycle and dynamic content after a click event

Question

Hi all,

I want to apply cycle to the div block with dynamic content. This content will be generated after a click event. Once i click the image it is working after that it is not working.

Code:

$("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

EDIT:

Try calling $.cycle() again after adding your dynamic content. Also, use Firebug to ensure that your content is being generated correctly.

If that doesn't work, then it looks like you will have to modify the cycle plugin to support dynamically adding "slides", or write your own solution.

---

From http://www.malsup.com/jquery/cycle/:

How it Works

The plugin provides a method called cycle which is invoked on a container element. Each child element of the container becomes a "slide". Options control how and when the slides are transitioned.

So, you can leave your Javascript alone, but the HTML should look like this:

<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>

Also, you should never have more than one element on a page with the same ID.