Jquery dynamicトグル問題

Question

各ブロックをトグルするjqueryを作成しました。しかし、あなたが1つをトグルすると、残りのトグルも切り替わります。

どのように私は1つのセクションに切り替えるときに、それは他のセクションを切り替えるdoesntの、独立してトグル（表示/非表示に）各ブロックをdynamicalyことができます。

注：私はそのが動的にクローン化されているので、ブロックごとに各クラスの名前を変更傾けます。

おかげ

$(document).ready(function() { 
    $('.alternatepayee-b').hide(); 

    $('.alternatepayee-checkbox').click(function() { 
    $('.alternatepayee-b').slideToggle("slow");  
    });  
}); 

マークアップ：

<div class="alternatepayee-checkbox clearfix"> 
    <input type="checkbox" value="y" name="subscribe" id="checkbox_4"> 
    <label class="foreign" for="checkbox_4" >Alternate Payee</label> 
</div> 
<div class="alternatepayee-b clearfix" >     
    <label class="field-accoundtid arrow">Account ID 
    <input type="text" name="accountid" value="" /></label> 
    <label class="field-first arrow" >First Name 
    <input type="text" name="first_name" value="" /></label> 
    <label class="field-last arrow">Last Name 
    <input type="text" name="last_name" value="" /></label>   
</div> 

<!-- 2nd block --> 
<div class="alternatepayee-checkbox clearfix"> 
    <input type="checkbox" value="y" name="subscribe" id="checkbox_4"> 
    <label class="foreign" for="checkbox_4" >Alternate Payee</label> 
</div> 
<div class="alternatepayee-b clearfix" >    
    <label class="field-accoundtid arrow">Account ID 
    <input type="text" name="accountid" value="" /></label> 
    <label class="field-first arrow" >First Name 
    <input type="text" name="first_name" value="" /></label> 
    <label class="field-last arrow">Last Name 
    <input type="text" name="last_name" value="" /></label>   
</div> 

Answer 1

jQueryのセレクタはセット要素のに取り組んでいます。クリックイベントハンドラのセレクタを絞り込む必要があるので、という1つの要素でのみ動作します。このような何かは（約）動作するはずです：

$('.alternatepayee-checkbox').click(function() { 
    // 'this' refers to the single checkbox div that was actually clicked 
    // next looks for the next sibling that matches '.alternatepayee-b' 
    $(this).next('.alternatepayee-b').slideToggle("slow"); 
}); 

あなたのマークアップによって異なります.nextのために使用しますが、それは一般的なアイデアは何。あなたが動的にこれらを追加する場合

また、あなたは自動的にあなたのページのロードの後に​​追加された要素にイベントハンドラをバインドする代わりに.live('click', ...)を使用することができます。