$ .cycle e conteúdo dinâmico após um evento de clique

Question

Quero aplicar o ciclo no bloco Div com conteúdo dinâmico. Este conteúdo será gerado após um evento de clique. Depois de clicar na imagem, ela está funcionando depois que não está funcionando.

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:

Tente ligar $.cycle() Novamente depois de adicionar seu conteúdo dinâmico. Além disso, use o Firebug para garantir que seu conteúdo esteja sendo gerado corretamente.

Se isso não funcionar, parece que você precisará modificar o plug -in de ciclo para suportar a adição dinâmica de "slides" ou escrever sua própria solução.

---

A partir de http://www.malsup.com/jquery/cycle/:

Como funciona

O plug -in fornece um método chamado ciclo que é chamado em um elemento de contêiner. Cada elemento filho do recipiente se torna um "slide". Opções Controle como e quando os slides são transferidos.

Então, você pode deixar seu JavaScript em paz, mas o HTML deve ficar assim:

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

Além disso, você nunca deve ter mais de um elemento em uma página com o mesmo ID.