Jqueryのクローニング、挿入された要素の挿入と操作

Question

私は2つのボタンを含むテーブルをクローンしています。 1つのボタンはクローンを作成し、新しいテーブル行を挿入し、もう1つのボタンはテーブル全体をクローンし、最後のテーブルの後に挿入します。

テーブルがクローンされて下部に挿入されたときに、追加ボタンをクリックして新しい行を追加すると、その行はトップテーブルにのみ挿入されます。

5つのテーブルがある場合、対応するテーブルに新しい行を挿入するにはどうすればよいですか？

マイHTML：

<table class="myTable"> 
<tr class="firstRow"> 
    <td> 
     Name: <input type="text" size="30" /> 
    </td> 
    <td> 
     Email: <input type="text" size="30" /> 
    </td> 
</tr> 
<tr> 
    <td colspan="2" align="right"> 
     <input type="button" value="Add" class="addRow" /> 
    </td> 
</tr> 
</table> 

<p><input type="button" value="Copy" class="addTable" /></p> 

のjQuery：

$('.addRow').click(function(){ 
    var cloned = $('.firstRow').clone(true); 
    cloned.insertAfter($('table.myTable tr').eq(-2)).removeClass('firstRow'); 
}); 


$('.addTable').click(function(){ 
    var cloned = $('.myTable').clone(true); 
    cloned.insertAfter($('.myTable:last')).before('<hr />').removeClass('myTable'); 
}); 

私のフィドルは： http://jsfiddle.net/jonxblaze/S3N77/

Answer 1

あなたの実装が良くありません。

、このいずれかを試してください：

$('.addRow').click(function(){ 
    var cloned = $(this).parents('table').find('tr:eq(0)').clone(true); 
    cloned.insertBefore($(this).parents('table').find('tr:last-child')); 
}); 

上記の実装は.firstRowクラスを必要としません。また、クリックされたボタンの親である表にのみクローンされた行を挿入します。どのように

Answer 2

これが第二クローン化された表がwが存在していないされているため、クローン行のクリックイベントをバインドします。これを行うには、jQueryの.on（）関数を使用する必要があります。

http://api.jquery.com/on/

基本的に、あなたは（）を.click使用する場合、それがどの文書で準備ができて、それがセレクタに一致する見つけることができるすべての要素にその機能を結合し、一つのテーブルのみです。 .on（）は、スクリプトの実行時に存在する要素だけでなく、時間的に先行するすべての要素に対して機能します。

実際に.on（）の代わりに.click（）を使用する場合は、2番目のテーブルを作成した後にクリックを再バインドします。ここで

はsimalar問題を抱えて私のポストです：.addRowボタンの Using jQuery .on() to make a drop-down menu