Question

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.