Jqueryプラグイン - 要素に動的にバインドします

Question

jqueryプラグインを作成しましたが、これをPHPスクリプトで作成されたDOM要素にバインドします。

$(document).ready(function(){ 

    $('#mywhatever').showcase(); 
    $('#mywhatever2').showcase(); 
    $('#mywhatever3').showcase(); 
}); 

をしかし、マークアップは、PHPスクリプトによって作成されているので、私は仕事にこのような何かを取得しようとしています：

<div class="showcase_window"> 

<div id='mywhatever'></div> 
<div id='mywhatever2'></div> 
<div id='mywhatever3'></div> 

</div> 

これは動作します。例として、次のマークアップを使用して

：

しかし、私は少し混乱しています...私はイベントを添付するために使用されていることを理解していますが、どのようにそれについて行くか分からない...

多くのありがとう！

P.S：ここでは、プラグインです：

$.fn.showcase = function() { 

    return this.each(function() { 

     var $this = $(this); 

     $this.find(".sc_itm_display").hover(function() { 
      $this.find(".sc_img_front").stop(true,true).fadeOut("slow"); 
      }, function() { 
     $this.find(".sc_img_front").stop(true,true).fadeIn("slow"); 
     }); 

    $this.find('.sc_color_select img').click(function() { 

    var color_path_1 = $(this).attr("src").replace("color","1"); 
    var color_path_2 = $(this).attr("src").replace("color","2"); 

    $this.find('.sc_itm_display .sc_img_back img').attr("src",color_path_1); 
    $this.find('.sc_itm_display .sc_img_front img').attr("src",color_path_2); 

    }); 
    }); 
    }; 

Answer 1

onは、イベントにハンドラをアタッチします。イベントは、ユーザーアクションまたはプロセスの完了/失敗などがあります。

イベントは追加されず、関数が追加されます。この場合、jQueryが自動的に行います。

$('.showcase_window').children()または$('.showcase_window>div')には、スクリプトで作成された3つのサンプルdivが含まれています。

$('.showcase_window').children().showcase();

（またはより効率的$('.showcase_window>div').showcase();）

これらのdivのそれぞれに対して一度showcase()を実行します。 this内にあるshowcaseはdiv（ 'mywhatever'）自体になります。

Answer 2

PHPが動作させたい要素を生成している場合は、それを使用して、コンマで区切られたID値の文字列をターゲットにしてスクリプトを出力します。次に、それらのターゲットをプラグインに使用します。

PHP出力この：あなたのjQueryで

var target_ids = "#this, #that, #the_other"; 

：

$(target_ids).showcase(); 

代わりに、あなたがターゲットにすると、あなたが自分のIDを知っている必要はありませんすべての要素をラベル付けする独自のクラスを使用します。

$(".mywhatevers").showcase();