動的に追加された要素でslideToggle（）を使用

Question

動的に追加された要素をjquery slidetoggle関数を使用して切り替えることに問題があります。また、jquery 1.2.6は従来のシステム要件のために使用しています。

また、要素がトグルしますが、ページ上の要素の数がトグルする回数が発生するようです。ここで

は私が持っているものです。

.toggleMe { 
display:none;} 
.toggle { 
cursor:pointer;} 

$(document).ready(function() { 
    $(".toggle").click(function() { 
     $(this).parents(".reportcontainer").children('.toggleMe').slideToggle('fast'); 
     return false; 
    }); 
}); 

<div class="reportcontainer"> 
    <div class="rbanner toggle"> 
     <div class="rtitle"><a href="#" class="toggle">CLICK HERE TO TOGGLE</a></div> 
     <div class="rexpand toggle expand"></div> 
    </div> 
    <div class="toggleMe"> HIDDEN/TOGGLED CONTENT </div> 
</div> 

私は誰が与えることができる任意のヘルプをいただければと思います。

ありがとうございました！ Dave

EDIT ***ユーザーがこの要素をページに追加すると、基本的にjquery関数も追加されるため、関数はページ上に何度も実行されていました。

ご意見ありがとうございます。

Answer 1

理想的には、これには.liveを使用しますが、jquery 1.2にはそれがあったかどうかはわかりません。新しい要素を追加した後にもう一度バインド操作を実行することもできます。 document.readyでそれを行うと、既にDOMにある要素だけがイベントにバインドされるので、アイテムを追加した後も同じことをします。 （ダブルバインディングや何かがないことを確認する必要があるかもしれません）。問題がある場合は、新しいアイテムに追加のクラスを追加します（「pendingbind」と言う）と、その後

$(".pendingbind").click(...)<br> 
$(".pendingbind").removeClass("pendingbind") 

を行うことができ、その

Answer 2

あなたのコードのようなものは正常に動作ようです。

しかし、あなたはここに「そのまま」、それを貼り付けコピーした場合、あなたが不足しているスタイルとスクリプトタグを持つ

<style> 
.toggleMe { 
display:none;} 
.toggle { 
cursor:pointer;} 
</style> 

<script> 
$(document).ready(function() { 
    $(".toggle").click(function() { 
     $(this).parents(".reportcontainer").children('.toggleMe').slideToggle('fast'); 
     return false; 
    }); 
}); 
</script> 

よろしく、 マックス