2012-03-21 6 views
0

動的に作成された要素でクリックイベントをトリガーしようとしています。 .on()を使用してclickイベントをバインドしましたが、要素が作成される前にトリガーメソッドが起動しているようです。私はいくつかの場所でクリックを誘発しようとしましたが、何も動作していないようです。どんな助けもありがとう。私は$( 'container:first-child')を使用して作成された最初の範囲のクリックをトリガーしようとしています。動的に作成された要素に.trigger()を使用する

displayThumbnails = function() { 

     $(photoArray).each(function(index) { 
      var thumbnailImg = this.SmallImageUrl, 
      largeImg = this.LargeImageUrl, 
      thumbnailId = 'thumbnail' + index, 
      largeImgId = 'image' + index; 

      if(index > indexCount) { 
       return false; 
      } else if (index >= indexStartValue && index <= indexCount) { 

       $(thumbContainer).append(
        '<span class="thumbnail" id="' + thumbnailId + '"><img height="45px" width="60px" src="' + thumbnailImg + '"/></span>' 
       ); 

       $(thumbContainer).on('click', '#' + thumbnailId, function(){ 
        $(thumbContainer).find('.active').removeClass('active'); 
        $(this).addClass('active'); 
        $('#displayed-image').attr('src', largeImg); 
       }); 
      } 
     }); 
    }; 
+1

コードにトリガーが表示されませんが、.on()を使用してclickイベントを要素にバインドし、clickイベントへのトリガー呼び出しが要素が追加されたり、DOM内に存在していることが確認されたりすると – j08691

+0

これは私が問題を前提としたものですが、問題は私が何らかの形で上記の関数に付ける必要があるということです。この関数は何度か呼び出され、新しい画像セットがロードされるたびに#display-image divを生成するためにトリガーを使用しようとしています。 – user699242

答えて

2

数か月後、私はこれを再検討しています。最近のIMOの答えは、後続の関数呼び出しを行うためにクリックをトリガすることがあまりにも相互依存的であるということです。あなたのページで何かが起こるようにクリックを誘発しようとしているなら、あなたはおそらくそれを間違った方法で考えているでしょう。私はこれを再考して終了し、大きな画像を独自に読み込む機能を持っていました。基本的には、クリックをトリガーして画像を読み込もうとしていました。

プロセスを再考することで、小さな機能を処理するために独立して動作する、よりクリーンなコードが完成しました。

また、私が他の2つの答えを受け入れなかった理由は、.on()が1.7.1のjQueryでイベントハンドラをバインドする方法です。

0

私は、新しいコントロールとあなたのトリガー機能の間のバインディングが失敗する可能性があると思います。要素が.onが、それはそれにバインドされたイベントはありませんと呼ばれた後に作成されている場合は

$(thumbContainer).live('click', ...) 
0

「上」の代わりに「ライブ」を使用してみてください。

@AlejoBrzによれば、.liveを試してみることができますが、状況によっては.delegateの機能も見ることができます。

[編集]あなたが持っているように使用すると、.onはまったく同じです。だから、あなただけの要素を作成した後、イベントを結合しているとして、多分あなたはちょうどこのと.onライン置き換えることができます見て考え直し上:

$('#' + thumbnailId).bind('click', function() { // the rest of your code here 

を私は、このソリューションは非常にだけでなく、スケールしないことに注意してくださいサムネイルの数が増えます。

関連する問題