$.. ciclo y contenido dinámico después de un evento de clics

Question

Quiero aplicar el ciclo al bloque Div con contenido dinámico. Este contenido se generará después de un evento de clic. Una vez que hago clic en la imagen, está funcionando después de que no funciona.

Código:

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

EDITAR:

Intenta llamar $.cycle() nuevamente después de agregar su contenido dinámico. Además, use Firebug para asegurarse de que su contenido se genere correctamente.

Si eso no funciona, parece que tendrá que modificar el complemento de ciclo para admitir dinámicamente agregar "diapositivas" o escribir su propia solución.

---

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

Cómo funciona

El complemento proporciona un método llamado ciclo que se invoca en un elemento contenedor. Cada elemento infantil del contenedor se convierte en una "diapositiva". Las opciones controlan cómo y cuándo se transmiten las diapositivas.

Entonces, puede dejar su JavaScript solo, pero el HTML debería verse así:

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

Además, nunca debe tener más de un elemento en una página con la misma identificación.