$。クリックイベント後のサイクルとダイナミックコンテンツ

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を持つページに複数の要素を持つことは決してありません。